Superfish Submenu Stacking Issue

Hi All,

I built a WordPress site based on the the Thematic theme framework. Thematic has the superfish menu system built into it. A user recently let me know that the drop-down menu system is not working correctly in IE7. I can confirm the hiccup in IE8’s compatibility mode.

I have worked through several z-index stacking ideas, including this one: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

…and have had no success squashing the bug. I wondered if one of you seasoned CSS ninjas could help me spot the problem. Also, I am aware of the validation issues and working through them. Here’s the site:

http://www.fasttrackincentives.com/

Thanks,

Ansel Taft

Hi,
You need to position the parent div of your dropdown and then set the z-index higher than the slideshow.

[B].menu [/B]{
width:960px;
margin:0 auto;
[COLOR=Blue]position:relative;
z-index:6;[/COLOR]
}

That didn’t work, sorry.

After further analysis, here is the problem:

The parent DIV of the menu is ‘header’. While I can z-index the parent element, and stack the menu above the content div in the process, the problem is that it hides the top of the content container as soon as it’s moved above the boundary of the header div.

Is there a way to raise the z-index of one child element (the content div) above all the others except for the menu div?

Thanks,

Ansel

Hi,

If a parent is positioned in IE7 then its child can never escape from that context.

If you remove position:relative from header and from #access (and any other parents of .menu although I don’t thing there are any others) then the child menu will escape from the parent and overlap the content div as required.

However, I didn’t see a problem with just applying a high z-index to #header as I didn’t see what you were getting at with the content div being hidden.

the problem is that it hides the top of the content container as soon as it’s moved above the boundary of the header div.
Hi,
Yes, I see what your talking about. The problem is that your #main div has position:relative; set on it too. You can try to manually set a lower z-index on it or better yet I would remove the positioning altogether.

The only reason you were using RP there was so you could use top:133px;
That could have been done with a top margin instead.

You will need to un-collapse child margins on your #main_wrapper so the top margin works.

There are styles for the #main div on different stylesheets


#main_wrapper {
[COLOR=Blue]overflow:hidden; [/COLOR]/*un-collapse child margins*/
padding-bottom:300px;
}

(line 119)
#main {
[COLOR=Red]/*top:133px;*/[/COLOR]
[COLOR=Blue]margin-top:133px;[/COLOR]
}

default.css (line 228)
#main {
background:none repeat scroll 0 0 #FDFCF2;
padding:0 0 22px;
}

2c-r-fixed.css (line 22)
#main {
border:1px solid #C7B68D;
margin:0 auto 40px;
overflow:hidden;
[COLOR=Red]/*position:relative;
top:-30px;*/[/COLOR]
width:958px;
}

That should get it working in IE7 now

Hi Rayzur,

This is a production site, so I made the changes, saw that it didn’t quite fix the problem and switched it back.

The submenu still slid under the main_wrapper and the content box stacked over the bottom of the content slider. Also, the palm tree shadow fell into the content window and the Contact Us sidebar hovered over everything.

Frankly, I’m thinking we can live with it, as IE7 is quickly becoming a minority browser with only 10% of the market (or less). I wish everyone used Chrome or FF. :smiley:

The solution I gave above was working fine :slight_smile:

Rayzur,

Thank you for your help streamlining our CSS.

Paul O’B - thank you for your insistence (persistence?) that you had the solution. You did. I removed the position:relative tags and added a z-index tag to the menu area. Problem solved.

Dude, you totally nailed it! 1,000,000 kudos to youuuuu!