2

Another problem with IE when trying to display a css:hover menu with <ul> and <li> while using a gradient background on the container of the menu.

The hover li is truncated while using a gradient bg and displays correctly without the gradient bg.

It works fine with Chrome and FF...

Demo with gradient

Demo without gradient

Source with gradient (without you just have to delete the .bg class)

HTML

<div class="header bg">
<div id="menu">
    <ul>
       <li><a href="#">Menu</a>
            <ul>
               <li><a href="#">Sub-menu 1</a></li>
               <li><a href="#">Sub-menu 2</a></li>
               <li><a href="#">Sub-menu 3</a></li>
               <li><a href="#">Sub-menu 4</a></li>                
               <li><a href="#">Sub-menu 5</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

CSS

.header {position:fixed;top:0px;right:0px;left:0px;z-index:10;height:110px;}
.bg {background-image: -moz-linear-gradient(top, #CCCCCC, #888888);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#888888));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#888888);
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#888888);    
}

#menu {width:960px;z-index:20;position:relative;height:40px;}
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
background:#009966;
 float:left;
 padding:0;
 margin-right:1px;
}
#menu li a {
font-size:16px;display:block;width:191px;line-height:40px;color:#FFF;text-decoration:none;
 }
#menu li:hover{background:#FF6600;}
#menu ul li ul {display:none;}
#menu ul li:hover ul {display:block;}
#menu li:hover ul li {float:none;margin:0;padding-bottom:0px;}
#menu li ul li a  {text-align:left;text-indent:10px;font-size:12px;background:none;color:#000;}
#menu li ul li a:hover {}

Anyone could help me on how to make it work with IE please ?

Valky
  • 1,856
  • 3
  • 20
  • 38

1 Answers1

0

No one found the solution ? ;-)

The issue was made by using the z-index property.

It's crazy, but IE doesn't like it in this case, I don't know why, if anyone could find a good reason, let me know...

Demo with gradient and without the z-index.

The line changed

.header {position:fixed;width:100%;left:0px;height:110px;}
Valky
  • 1,856
  • 3
  • 20
  • 38
  • Ha! Just found that and meant to post :) But I don't know why. Also, changing `position: relative` on menu to `position:fixed` displays the menu, but you cannot select menu items outside the header. Probably the same issue... – Kosta Dec 09 '12 at 20:25
  • I was going crazy with this ! Because I needed fixed position for it. Everything is so complicated when you need to make them work with every browser. And when you make them for mobiles too, it's more complicated !! `position:fixed` doesn't works with iPhone and iPads for example... – Valky Dec 09 '12 at 20:29