Dropdown Menu Hides Behind Slideshow

HTML & CSS
1

OK,
I’ve been absolutely battling this issue for sometime now and need some help :slight_smile: I have a dropdown menu as well as Frontpage Slideshow working together on a website found at www.bgprograms.com. Works fine in Firefox, Safari and IE8+, but in IE7, the dropdown floats behind the slideshow. I tried assigning different z-indexes and IE7 isn’t registering them properly.

I did find one fix that when I added: position: relative to the div #middle, the drop down works fine in IE7. HOWEVER, once I do that, every single link on the website goes inactive. I’m stumped, thank you in advance.

2

Hi TT, Welcome to SitePoint :slight_smile:

The problem is a z-index bug with IE6/7. Any positioned element in those browsers use z-index:0 instead of z-index:auto.

The problem is the position:relative; that is set on the div.wrapper. If you remove that it will work in IE6/7 but then you loose the positioning of your menu since it is absolute positioned.

If I were you I would eliminate that <div id=“menu-container”> that the menu is nested in and nest the whole menu inside the header.


<div class="wrapper" id="homewrapper">
    [B][COLOR=DarkGreen]<div id="header">[/COLOR][/B]
        <div class="logo">
            <a href="index.php"><img src="images/logo.png" alt="Home" title="Home" /></a>
        </div>        
        <div class="header_right">
            [COLOR=Red]<snip></snip>[/COLOR]
        </div>        
        [COLOR=Blue]<div id="mainmenu">[/COLOR]
            <ul class="sf-menu">
                [COLOR=Red]<snip></snip>[/COLOR]
            </ul>
        [COLOR=Blue]</div>[/COLOR]
    [B][COLOR=DarkGreen]</div>[/COLOR][/B]
</div>

Now set position:relative on the #header and AP the menu to the bottom there.

3

Hey, wait a minute before you rework that html.
Instead of nesting the menu in the header I think i found something else that will work.

Just set the RP on the #homewrapper.wrapper only and remove it from the general div.wrapper


/* wrapper setup */

div.wrapper {
margin:auto;
width:942px;
[COLOR=Red]/*position: relative;*/[/COLOR]
}

div#header {
height:190px;
}

#homewrapper.wrapper{
height: 190px;
[COLOR=Blue]position: relative;[/COLOR]
}

That should get IE straightened out

4

I’m trying that now!!!

5

Nope - no go. The dropdown still hides behind the slideshow in IE7…should I try your other suggestion by editing the html?

6

Tried eliminating the menu-container and nesting everything inside of #header and still pulls down behind the slideshow. Any other thoughts?

7

You probably have some more positioned elements in the lower portion of the page.

Let me look through the code again but I think you could also set the z-indexes manually for both .wrapper divs.

If this doesn’t work I will look through it all much closer and find a solution.

This is for working with your original html

/* wrapper setup */

[B]div.wrapper[/B] {
margin:auto;
width:942px;
[COLOR=Blue]position: relative;/*both wrapper divs*/
z-index:1;[/COLOR]
}

div#header {
height:190px;
}

[B]#homewrapper.wrapper[/B]{
height: 190px;
[COLOR=Blue]z-index:2; /*layer the header on top*/[/COLOR]
}
8

THAT DID IT WOOHOOOOO!

Hey man, thanks for the help - do you have a paypal account? If so, send me your email and I’ll buy you a beer :slight_smile:

9

We don’t take donations here, were just glad to help. :slight_smile:

Like I said, it’s just a z-index bug in IE6/7. It was resolved in IE8.

The other thing to remember about z-index and positioned elements is that they can never climb higher than their parent.

I set z-index:1 on the lower wrapper so if you try to set z-index:1000 on any children they will never climb above their parent which is z-index:1.

The top .wrapper at z-index:2 will always be higher than anything in the lower wrapper. :wink:

10

Makes sense when you pull back a bit on the code you know! When I work and re-edit and re-edit things I lose scope of the big picture :slight_smile:

Thanks again, helped a ton and saved me a HUGE headache. You guys rock!

11

Sure we do (well, I do). Just send your donations, in large piles of unmarked bills, to:

[INDENT]Black Max
Third Stall From the End
Grand Central Station Lavatory
Ulan Bator, Mongolia[/INDENT]

Or just hoist a beer for us next time you’re indulging.