...

View Full Version : IE Menu Problems



macneal
10-24-2011, 12:41 AM
I've worked on a menu that works fine Firefox and Safari, but fails in IE. Is there anything that you could think of that would help? The first drop down works in IE, but none of the others. This was a project I picked up midstream with the menu built, and the client really wants to use it.

Here's a sample http://bigoak.info/press/


#nav ul { height: 47px; z-index:15000; }
#nav ul li { height: 47px; float: left; z-index: 9999; position: relative;}
#nav ul li a { display: block; height: 47px; line-height: 55px; padding: 0 10px 0 0px; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none;
text-align: center;
background: url(images/nav-seperator.jpg) no-repeat right bottom;
}
#nav ul li.first a { display: block; height: 47px; line-height: 55px; padding: 0 10px 0 0px; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none;

background: url(images/nav-first-seperator.gif) no-repeat right bottom;
}
#nav ul li.last a { display: block; height: 47px; line-height: 55px; padding: 0 10px 0 0px; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none;
background: url(images/nav-seperator.jpg) no-repeat right bottom;

}
#nav ul li a span { display: block; padding: 0 0 0 11px; height: 47px; float: left; width: 188px; }
#nav ul ul.dropdown-container { width: 279px; position: absolute; left: 0px; height: auto; display: none; padding: 7px 0 8px 13px; background: url(images/dropdown-bg.png) no-repeat left bottom; top: 47px; z-index: 2;
margin-left: -6px;
text-align: left;
}
#nav ul ul.dropdown-container li { width: 260px; margin: 0 0 7px; float: none; height: auto; text-align: left; }
#nav ul ul.dropdown-container li a { float: none; padding: 6px 9px 4px; color: #5e686c; font-weight: normal; line-height: 14px; height: auto; width: 242px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #f3f3f3 url(images/dropdown-single-arrow-h.gif) no-repeat 242px center; border: 1px solid #e7e7e7; text-align: left; }
#nav ul ul.dropdown-container li a:hover { color: #8ddc3e; margin: 0; border: 1px solid #a9b2b5; background: #f3f3f3 url(images/dropdown-single-arrow.gif) no-repeat 242px center; text-align: left; }
#nav ul ul.dropdown-container li a:hover span { background: none; padding: 0; color: #5e686c;text-align: left; }
#nav ul ul.dropdown-container li a span { color: #a9b2b5; font-size: 10px; height: auto; float: none; padding: 0; text-align: left; }
#nav ul .sub-block { height: 500px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #f3f3f3; padding: 8px 9px 6px; width: 241px !important; border: 1px solid #e7e7e7; background: #f3f3f3 url(images/dropdown-single-arrow-h.gif) no-repeat 242px center;}
#nav ul .sub-block:hover { border: 1px solid #a9b2b5; background: #f3f3f3 url(images/dropdown-single-arrow.gif) no-repeat 242px center;}
#nav ul .sub-block ul { height: auto; padding: 0; }
#nav ul .sub-block ul .title { float: none; }
#nav ul .sub-block ul .title a { background: none; padding: 0 8px 0 0; none; color: #5e686c; font-weight: normal; line-height: 14px; height: auto; width: 242px; font-size: 14px;}
#nav ul .sub-block ul .title a:hover {background: none;width: 241px}
#nav ul .sub-block ul li { margin: 0; float: left; width: 80px; }
#nav ul .sub-block ul li strong { color: #e73e34; font-size: 12px; display: block; margin: 0 0 5px; }
#nav ul .sub-block ul li a { width: auto; padding: 0 0 0 8px; font-size: 11px; line-height: 18px; color: #5e686c; border: none; background: url(images/sub-block-arrow.gif) no-repeat left center; display: block; }
#nav ul .sub-block ul li a:hover { border: none; background: url(images/sub-block-arrow.gif) no-repeat left center; }
#nav ul .hovered a.hoverable { color: #454545; margin: 0 -6px; background: url(images/round-right2.png) no-repeat right top; }
#nav ul .hovered a.hoverable span { background: url(images/round-left2.png) no-repeat left top; padding: 0 -6px 0 17px; width: 200px; }
#nav .my-account { float: right; }
#nav .my-account a { float: right; text-transform: capitalize; padding: 0 15px 0 0; background: url(images/nav-simple-arrow.gif) no-repeat right 24px; }
#nav .my-account a:hover { color: #fff; background: url(images/nav-simple-arrow-hover.gif) no-repeat right 24px; }
#nav .my-account a:hover span { background: url(images/ico-account-hover.gif) no-repeat left 20px; }
#nav .my-account a span { padding: 0 0 0 20px; background: url(images/ico-account.gif) no-repeat left 20px; }
#nav .resource-nav { position: relative; top: 5px; z-index: 3; }
#nav .resource-nav a { height: 46px; width: 133px; line-height: 46px; background: url(images/nav-simple-arrow.gif) no-repeat 116px 20px; /*background: url(images/nav-resource.jpg) no-repeat left top;*/ }
#nav .resource-nav a:hover { color: #fff; height: 46px; background: url(images/nav-resource-hover.jpg) no-repeat left top; }
#introduction { text-align: center; height: 340px; width: 960px; padding: 20px 0 0 0; margin: 0px -10px 17px; position: relative; background: url(images/intro-bg-tr.png) no-repeat left bottom; }
#introduction h1 { color: #3b9bd0; text-transform: uppercase; font-size: 61px; margin: 0 0 10px; }
#introduction p, #introduction h2 { font-size: 24px; line-height: 28px; color: #464647; }
#introduction p a { font-weight: bold; text-transform: uppercase; text-decoration: none; color: #e13c33; }
#introduction p a:hover { text-decoration: underline; }
#introduction h2 + p { font-size: 28px; line-height: 36px; padding: 10px 0 0 0; }
#introduction .try-out { display: block; font-size: 21px; position: absolute; height: 57px; width: 960px; left: 0; bottom: 0; line-height: 57px; text-decoration: none; color: #fff; }
#introduction .try-out:hover { background: url(images/try-now-hover.jpg) no-repeat left top; }
.section-col {
float: left;
width: 300px;
height: 212px;
margin-top: 0;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 0;
font-family:Arial, Helvetica, sans-serif;
}
.section-col h6 a { display:block; text-decoration:none; width: 280px; height: 31px; background: url(images/home-3col-title.gif) no-repeat left top; margin: 0 0 10px; font-size: 14px; color: #fff; font-weight: bold; line-height: 30px; padding: 0 10px; }
.section-col h6 a:hover { background: url(images/home-3col-title.gif) no-repeat left -31px; }
.section-col div { background: url(images/home-3col-2.jpg) no-repeat left top; height: 252px; width: 300px; }
.section-col.testimonial p { color: #767d80; font-size: 11px; line-height: 16px; padding: 10px 10px 0; }
.section-col.testimonial p strong { color: #2c2e2f; }
.section-col.testimonial p em { font-size: 11px; font-family: arial, sans-serif; }
.section-col.testimonial p a { font-style: normal; color: #34a8e1; text-decoration: none; }
.section-col.testimonial p a:hover { text-decoration: underline; }
.section-col p.iconFloat { float:left; width:32px; }
.section-col.BoxNormal p { color: #767d80; font-size: 11px; line-height: 18px; padding: 10px 10px 0; }
.section-col.BoxNormal p strong { color: #2c2e2f; }
.section-col.BoxNormal p em { font-size: 11px; font-family: arial, sans-serif; }
.section-col.BoxNormal p a { font-style: normal; color: #34a8e1; text-decoration: none; }
.section-col.BoxNormal p a:hover { text-decoration: underline; }
.section-col.BoxMargin { margin: 0; }
.section-col.live-chat div { width: 200px; padding: 10px 0 0 100px; background: url(images/home-3col-1.jpg) no-repeat left top; height: 81px; }
.section-col.live-chat div p { font-size: 18px; color: #6f777a; line-height: 24px; text-transform: uppercase; }
.section-col.live-chat div p span { color: #248cc7; font-size: 22px; }
.section-col.live-chat div .time sup { vertical-align: top; font-size: 10px; }
.section-col.live-chat div .time span { font-size: 11px; text-transform: capitalize; color: #7d7e7e; }
.section-col.brochure { margin: 0; }
.section-col.brochure div { width: 165px; height: 81px; padding: 10px 0 0 135px; background: url(images/home-3col-3.jpg) no-repeat left top; }
.section-col.brochure div p { color: #6f777a; font-size: 11px; }
.section-col.brochure div p strong { color: #d9291e; font-size: 18px; }
.section-col.brochure div a { font-size: 10px; color: #6f777a; display: block; margin: 10px 0 5px 30px; text-decoration: none; }
.section-col.brochure div a:hover { color: #34a8e1; }
.section-col.brochure div .other { margin: 0 0 0 30px; }
.page-title { float: left; color: #3e3f40; text-transform:uppercase; margin: 25px 0 0 0;
padding-left: 25px;
font: normal 24px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.page_subtitle { margin-top:15px; color:#3e3f40; }
#sub-nav { margin: 31px 0 0 0; float: right; }
#sub-nav li { float: left; margin: 0 0 0 40px; }
#sub-nav li a { float: left; color: #8e8e8e; font-size: 14px; text-decoration: none; }
#sub-nav li a:hover { color: #e03c33; }
#sub-nav li a.selected { color: #e03c33; }

Frankie
10-24-2011, 07:18 AM
That's an essentially Javascript-driven menu -- with Js off, it doesn't work anymore in FF either. The only thing I can offer you is a tutorial on how to create a (normal) cross-browser drop-down menu with CSS (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-make-a-menu-with-css.php).

joanzn
10-27-2011, 01:26 AM
You from the future Frankie!? you joined the forums "Sep 2011"! Lol

Frankie
10-27-2011, 03:03 AM
I'm afraid it is you. You didn't take a nap last year, you hibernated through winter, spring and summer.... ;-)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum