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

OK, so I had this issue with my jQuery subnav in IE7 where it was sc开发者_Python百科rolling 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?)

---

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

---

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.

---

<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.

---

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.

---

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.