3 replies [Last post]
mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 8 years 33 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

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; }

Thanks for help.

Garry
http://www.mediamole.net

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 8 years 33 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

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.

Thanks for help.

Garry
http://www.mediamole.net

mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 8 years 33 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

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

Thanks for help.

Garry
http://www.mediamole.net