Thu, 2009-09-24 14:48
I've created a CSS based dropdown menu which is working fine in all browsers apart from IE7.
The problem I have is that the dropdown menu sits behind a relative DIV which has absolute positioned elements in it. When I set the DIV to a negative z-index the CSS menu goes on top of the image, however, the links in the positioned UL then become unclickable.
I'm a little puzzled as to why IE7 would be doing this, as I'm sure my stacking order is correct.
The site can be viewed on a test server testmole.co.uk
The code is below, and really hope somebody can share some light on what I'm doing wrong:
/* NAVIGATION */ #nav { width:939px; padding:16px 0 0 0; margin:0; background:url("nav-bk.jpg") repeat-x top left; float:left; } #nav ul { list-style:none; margin:0 auto; padding:0; width:920px; border-top:solid 2px #F1F1F1; } #nav li { float:left; font-size:1.1em; position:relative; z-index:888; } #nav li a { font-style:italic; font-weight:bold; display:block; padding:0 26px; line-height:2.1em; text-decoration:none; } #nav li a:hover { background-color:#E6E6E6; } /* global nav home icon */ #nav li#home-icon { width:15px; text-indent:-9999px; height:14px; position: relative; } #nav li#home-icon a { text-decoration: none; cursor: pointer; padding:0!important; } #nav li#home-icon span { height:14px; position: absolute; top: 4px; left: 0; background:url("home-icon.png") no-repeat top left; width:15px; } #nav li#home-icon a:hover { background-color:transparent; } /* sub menu */ #nav ul li ul { position: absolute; left: -10000px; list-style:none; background-color:#E6E6E6; border-top:none!important; z-index:88; } #nav ul li:hover ul { display: block; left:0px; width:145px; margin:0; padding:0; } #nav ul li ul li { float:none!important; line-height:normal; text-align:left; padding:0!important; } #nav ul li ul li a { display:block; padding:0 0 0 8px!important; font-size:11px!important; } #nav ul li ul li a:hover { text-decoration:none; background-color:#fff!important; } /* TOP SECTION BOTTOM EDGE */ #sales-msg { width:947px; background:#fff url("branding-bottom-edge.jpg") no-repeat top left; height:6px; padding:0; margin:0 0 15px 0; } #sales-msg p { padding:0; margin:0; } #sales-msg p { text-indent:-9999px; } /* MAINCONTENT DIVIDES */ #maincontent { width:939px; padding:0; margin:0 auto; } /* HOME PAGE ONLY - STYLES */ #home-flash { width:939px; height:500px; } #home-banner { width:939px; position:relative; z-index:1; margin:0 auto; height:526px; } #home-banner h2 { background-color:#FF00BB; color:#fff; text-transform:uppercase; font-size:3.1em; position:absolute; width:auto; margin:0; padding:0 10px 0 20px; top:53px; z-index:2; } #home-banner h3 { font-size:2.4em; color:#fff; padding:0; margin:0; text-transform:uppercase; position:absolute; left:20px; top:160px; z-index:3; } #home-banner ul { list-style:none; padding:0; margin:0; font-size:1.7em; } #shop-lnks { width:200px; left:20px; top:230px; position:absolute; z-index:10;} #promo-lnks { left:20px; top:410px; position:absolute; z-index:11; } #home-banner li { font-weight:500; padding:0 0 0 17px; text-transform:uppercase; } #home-banner li a { color:#fff; display:block; padding-bottom:6px; } /* #promo-lnks li { background:url("pink-arrow.png") no-repeat top left; } */ #shop-lnks li { background:url("white-arrow.png") no-repeat top left; } #promo-lnks li img { vertical-align:middle; }
Thu, 2009-09-24 18:58
#1
IE7 (and earlier versions)
IE7 (and earlier versions) behave differently from more standards compliant browsers. In effect, if you give an element position:relative without any z-index, IE7 behaves as if you have given that element z-index: 0. You can see this by adding z-index: 0 to your #branding div. IE7 won't change, but IE8, Firefox, Chrome, Safari et al will now all behave like IE7.
Simple fix, is to give #branding a z-index value higher than #home-banner, e.g. z-index:2. Normally, I'd set the z-index on siblings, so if a z-index value on #branding doesn't fix things, also add position:relative and z-index to #maincontent so that #maincontent has a z-index value lower than #branding.
Better fix is to redo your #maincontent area so it doesn't need position, by using background image, margins & padding.
Thu, 2009-09-24 20:07
#2
Thanks for your tip will
Thanks for your tip will give it ago.
The issue I got is that the image is actually going to become Flash with positioned text on top of it, hence why I've had to do it the way I have.
I would of also used margins and padding normally, but can't in this instance once the Flash is used.
Thu, 2009-09-24 22:17
#3
Thanks for your
Thanks for your help.
Simply by adding z-index to branding has fixed the issue! I'h actually forgotten I'd used positioning on the branding DIV