Dropdown Menu Hides Behind Slideshow

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.

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 class="header_right">
        [COLOR=Blue]<div id="mainmenu">[/COLOR]
            <ul class="sf-menu">

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

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 {
[COLOR=Red]/*position: relative;*/[/COLOR]

div#header {

height: 190px;
[COLOR=Blue]position: relative;[/COLOR]

That should get IE straightened out

I’m trying that now!!!

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

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

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] {
[COLOR=Blue]position: relative;/*both wrapper divs*/

div#header {

height: 190px;
[COLOR=Blue]z-index:2; /*layer the header on top*/[/COLOR]


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:

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:

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!

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

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