IE7 is messing up the z-index property with my subnav (although I've already fixed that!)

Question

OK, so I had this issue with my jQuery subnav in IE7 where it was scrolling down behind the main content after the header. Did a fair bit of research and found a great fix involving simply applying a z-index value to the header, and one to the main content.

All was well. Or so I thought.

Turns out IE7 is still messing up the subnav z-index within the header itself. The subnav still drops down behind the tagline, which is also part of the header. Particularly when you hit the subnav on the "Help Now" tab. (again, IE7 only)

http://betawww.helpcurenow.org

I've applied z-index values to both the subnav and the tagline, but that did not resolve the issue as did adding z-index values for the header and maincontent divs.

Any tips? Did I specify my z-index improperly with the subnav? (should I have applied to the parent element?)

Answer 1

<div id="maincontent" style="z-index=-1" class="container960"></div>

Might create some problems with links in maincontent at that point, but you can issue fixes from there.

Answer 2

Some of the HTML controls are rendered by IE as "windowed", that is, not respecting z-index. I don't know about IE7, but for older IEs the selectbox and iframe, for example, were windowed.

Answer 3

try:

#header #nav {position:relative; z-index:9000;}

and

#header #tagline {position:relative;}

I think older IE has a problem with z-indexes because they reset stacking order with items that share parents.

Answer 4

Have you tried making the z-index on header higher than the z-index on nav e.g.:

#header
{
  z-index: 5000;
}

#nav
{
  z-index: 2000;
}

?

More info here

Answer 5

I had to change the z-index on the #tagline to -1. Changing the z-index on the header was problematic mainly because I was already using a hack to keep the subnav from going behind the main content too.