IE7 CSS MegaMenu issue

HTML & CSS
1

** ISSUE RESOLVED - See below post **

Hi,

I’ve been racking my brain all Friday and most of this afternoon and getting nowhere with this IE7 issue.

The following code for a navigation menu works brilliantly with IE8 and Firefox, Chrome etc. However, I am getting an error with IE7.

My megamenu dropdown can’t display over an image. Notice in IE7 how the image (google search image) appears higher in the z-index when I hover over the yellow area. Why is this?

Here is the code I am currently using in case you want to try this locally:

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>CSS | IE7 Issue</title>
<style type="text/css">
.row {position:relative; margin-left:-10px;}
.gu12 .row {width: 960px;}

li {padding:0;margin:0}
a {padding:0;margin:0}

.col {padding-left:10px; float:left; position:relative;}
.gu12{width: 950px;}

#nav3 ul {float:left;}
#nav3 ul li {list-style-type:none;float:left}
#nav3 ul li a {display:block;line-height:40px;}

#nav3 {padding-left:1px;height:40px}
#nav3 a span {height:40px;padding:0;margin:0;margin-top:0px!important;position: absolute; width 100%;height:100%}


a#programme-options {height:40px;width:177px;position: relative;}
a#programme-options span {background-position:-159px 0px;position: absolute;width: 100%;height: 100%;}   
a#programme-options span:hover {background-position:-159px -160px!important}
a#programme-options.active span, a#programme-options:active {height:40px;width:177px;margin-top:0px!important;background-position:-159px -200px}

#nav {padding-top:15px;padding-bottom:0px;}
#nav {margin-top:45px;padding-top:0px;padding-bottom:0px;}
#nav ul {float:left;width:950px;}
#nav ul li {list-style-type:none;float:left}
#nav ul li a {display:block;line-height:40px;}

#top .avia_mega ul ul li, #top .avia_mega >li >ul li{
color:#777;
background-image: url(menu_arrow.png);
background-position: -20px -11px;
*background-position: -50px -51px; /*ie7 pseudo fix of bg images*/
background-repeat: no-repeat;
}
#top .avia_mega{height:40px; line-height:40px; padding:0; left:1px; bottom:0px; position:absolute; z-index:100}
.avia_mega, .avia_mega ul{margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:40px; z-index:5}
#top .avia_mega li{float:left; position:relative; z-index:20; margin-left:0}
#top .avia_mega ul a:hover{text-decoration:underline}
#top .avia_mega div ul{line-height:21px}
.avia_mega1, .avia_mega2, .avia_mega3, .avia_mega4, .avia_mega5{position:absolute; display:none; top:0px; left:0; padding:8px}
#top .avia_mega div ul li{width:162px; padding:15px}

#top .avia_mega > li > ul, #top .avia_mega > li > ul ul {background:#4d0702}
#top .avia_mega > li > ul li {background:#990E03}

#top .avia_mega div ul{float:left}
#top .avia_mega div ul ul{padding:0 0 10px 0}
#top .avia_mega div ul ul ul{padding:2px 0 0}
#top .avia_mega div ul li li{width:139px; float:left; clear:both; padding:3px 0 3px 23px; margin:0}
#top .avia_mega div ul li li li{width:116px}
#top .avia_mega div ul li li li li{width:93px}
#top .avia_mega ul a{text-align:left; display:inline; line-height:21px; padding:0; height:auto; float:none; font-size:1em}

#top .avia_mega div ul ul .avia_mega_text_block{background:none; padding:3px 0 0 0; margin:0; font-size:1em; line-height:1.7em}
#top .avia_mega div ul .avia_mega_hr{width:100%; height:20px; clear:both; padding:0}
#top .avia_mega >li >ul, #top .avia_mega >li >ul ul{position:absolute; display:none; width:203px; top:40px; left:0px; padding:8px}
#top .avia_mega >li >ul ul li:first-child{left:-10px; padding-left:0; position:relative; width:234px}
#top .avia_mega >li >ul ul li:first-child a{position:relative; left:44px}
#top .avia_mega >li >ul a{width:170px; display:block; padding:2px 20px 2px 0;color:#fff;font-weight:normal!important}
#top .avia_mega >li >ul li{padding:3px 0 3px 14px}
#top .avia_mega >li >ul ul{border-top:medium none; left:224px; top:-8px}
#top .avia_mega >li:hover >ul ul, #top .avia_mega >li>ul li:hover ul ul,  #top .avia_mega >li>ul ul li:hover ul ul,  #top .avia_mega >li>ul ul ul li:hover ul ul,  #top .avia_mega >li>ul ul ul ul li:hover ul ul{display:none}
#top .avia_mega >li:hover >ul, #top .avia_mega >li >ul li:hover ul,  #top .avia_mega >li >ul ul li:hover ul,  #top .avia_mega >li >ul ul ul li:hover ul,  #top .avia_mega >li >ul ul ul ul li:hover ul,  #top .avia_mega >li >ul ul ul ul ul li:hover ul{display:block}
</style>

</head>

<body id="top">

    <div class="row">
      <div class="col gu12 navarea">
        <div id="nav3">
        <ul id="menu-main-menu" class="avia_mega sf-menu" style="background:red">  
              <li><a href="/" id="home" class="home "><span></span>Home</a></li> 
              <li><a href="#" id="programme-options" class=""><span style="background:yellow"></span>Tester</a>                 
                <ul>           
                  <li><a href="#">Test Link</a></li>  
                  <li><a href="#">Test Link</a></li> 
                  <li><a href="#">Test Link</a></li> 
                  <li><a href="#">Test Link</a></li> 
                  <li><a href="#">Test Link</a></li> 
                </ul>
              </li>
        </ul> 

        </div>
      </div>

    </div>
    <div class="row">
      <div class="col gu12">
        <img src="http://indiawebsearch.com/files/image/thumb_googlelogo.jpg" class="main-img" style="float:left" />            
      </div>
    </div>

</body>

</html>

^^^^^^^^^^^^^^

OK, so it seems ‘row’ and ‘col’ are causing some issues.

So I changed my HTML to:


	<div class="row2">
	  <div class="col2 gu12">
		<img src="http://indiawebsearch.com/files/image/thumb_googlelogo.jpg" />			
	  </div>
	</div>

which has now resolved this.

happy dance

2

Yes ultimately in IE7 and under its the positioned parent that dictates the stacking order and as both your menu and your image were in separate .row (positioned) elements then the one later in the html will appear on top.

You would have needed to add a class to modify the menu parent to have a higher z-index or change the image parent to be not positioned as you have done.:slight_smile: