Z-index problem on IE7

Question

**this question is on bounty because the below answers did not solve the problem.

I am debugging a page in IE7 and have run into one problem. When you hover over a nav link, the dropdown falls below the slide below it. The dropdown ul is positioned absolutely with a z-index of 10 and the slider is positioned relative to its parent with a z-index of 1. Something within the #slider is causing the menu to fall behind it.

You can view it at vitaminjdesign.com/search

I used jquery to change the z-indexes of every child of #slider:

$(function() {
      $('.jFlowSlideContainer').css('z-index', '1');
        })
      $(function() {
          $('#jFlowSlide').css('z-index', '1');
        })
      $(function() {
          $('#slides').css('z-index', '1');
        })

Still, in IE7, the submenu sits behind the slider. Perhaps the problem is lying in the menu script?

Answer 1

Try giving the ul Or the li height:auto. It's hard to tell without seeing the code.

Answer 2

position:relative;
float:left;
height:296px;
z-index:1!important;

to z-index exists the position needs to be "absolute" and the display "block"

position:absolute;
display:block;
z-index:1!important;

greetings

Answer 3

You seem to have several problems. I took out everything between <div id='slider'> ... </div> and filled it with dummy text, so i could see if the menu was going over or under. It was still going under. I had a look at the rules in style.css for #slider, and removed the position: rule, to get the following:

#slider {
Z-INDEX: 1 !important; FLOAT: left; WIDTH: 960px; HEIGHT: 296px;
}

And that seemed to make it work. Then I added the slider content back in, and it was broken again. =\

Answer 4

The problem is with stacking contexts. Basically the #menu li elements on which you have set a z-index (to 9) are not in the same stacking context as the #slider element (on which you have set z-index to 1). A quick solution would be to set the z-index of your #header element to 2, however I'd recommend reading up on stacking contexts.