PDA

View Full Version : CSS Drop-Downs Hiding Behind Text in IE7



jrawdon
Apr 2nd, 2007, 06:54 AM
I've got a site I've designed with a CSS drop-down menu. Works great in FF and Opera, but IE6 and IE7 have an issue.

On the page www.aviatorswing.com/training_priv.php (http://www.aviatorswing.com/training_priv.php) when using the drop-down menu from Services and then flying sideways on Flight Training, you see the menu gets hidden behind the Private Pilot Certificate text.

CSS is here (http://www.aviatorswing.com/style/awmain.css), but there is supplemental CSS php'd into the page itself for IE hacks. (Header element position is toward the top of the CSS and all the navigation menu structuring is at the bottom. I haven't had a chance to clean up and comment the CSS yet.)

It seems to be caused by the positioning of the text element. Absolute, and relative both give it the problem.

I've tried z-indexing it until I went crazy, but to no avail.

If I can't find a solution soon, I'll be turning the logo and text into a two-cell table and shaking my fist in the direction of Microsoft HQ.

Any help is super greatly appreciated!

Thanks.

koyama
Apr 3rd, 2007, 02:24 AM
I've tried z-indexing it until I went crazy, but to no avail.
IE6/7 has a bug that generates a new stacking context even when it shouldn't. Read this: IE z-index bug (http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html)

In your case the affected element is #menu.

One possible fix is to raise the z-index value for #menu. For example:


#menu {
BORDER-RIGHT: #333 2px solid;
LEFT: 32px;
FLOAT: left;
BORDER-LEFT: #333 1px solid;
WIDTH: auto;
CURSOR: default;
POSITION: relative; /* IE generates new stacking context because of this */
TOP: 129px;
z-index: 10;
}

Note: Alternatively you could float the text instead of using absolute positioning.

jrawdon
Apr 11th, 2007, 12:07 AM
My apologies for not posting a follow-up on this.

Adding the z-index:10 fixed it very nicely. I had z-indexed the children of the menu item since they were the ones actually showing the problem, but that didn't work. Fixing it at the parent level was great.

Thanks for the solution!

Jeff