I've been having problems with the Superfish dropdown menu appearing behind a promoted node that contains a Galleria slideshow gallery. I tried all sorts of position:relative and z-index changes, but to no avail. I finally discovered the IE z-index bug, where z-indexes gets reset each time you use position:relative (its a bit more complex than that, actually, but I'll keep this simple). So, you can set z-index:1000 on the drop-down ul, and z-index:1 on the gallery wrapper, but if you have a position:relative on something that wraps either of those two html elements, it resets the z-index so that the menu drops behind the galleria.

The solution is amazingly simple, once you know what to do. The primary menu is in the header-group-wrapper div and content is in the main-wrapper div. So, in ie7-fixes.css, set the header wrapper to have a z-index of 2, and set no z-index on main-wrapper (which means its 1). Now all content in header-group-wrapper will appear above main-wrapper, no matter if something has z-index:10000000 somewhere in main-wrapper. NOTE: This is only in IE7, and possibly below, but who cares about IE6 anymore. IE8 has thankfully fixed this problem

#header-group-wrapper {
position:relative;
z-index:2;
}
#main-wrapper {
position:relative;
}

I thought I would share this information, in case anyone else needs it. If this is the wrong place for such info. let me know.

CommentFileSizeAuthor
#10 Screen Shot 2011-12-22 at 9.54.23 PM.png210.64 KBsbakshian

Comments

jkasdorf’s picture

jkasdorf commented

Thank you for this, you've saved me a fair amount of time.

leahtard’s picture

leahtard commented

Worked great for me too!

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

Marking issue as fixed so others can find this easily. Thanks for sharing!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

itserich’s picture

itserich commented

Thanks, this is helpful generally, different themes and regions.

For other users, I found the region name most easily by:

1- Viewing the web page in Safari.
2- Right Click from within the page and choose Inspect Element
3- Select Elements from the menu on the bottom half of the page

For my case it showed

crins’s picture

crins commented

[edit] Moved my question to a more appropriate thread.

Erik

aquariumtap’s picture

aquariumtap commented

@crins - it doesn't sound like you're using Fusion. I suggest posing your issue in the Adaptive Theme issue queue.

crins’s picture

crins commented

sorry about that.
I'll move my question.

tuwebo’s picture

tuwebo commented

@incrn8 thank you very much for sharing this tip!
Get the simplest solution is the most complicated thing :)

I would like to suggest you to change the title of the issue to:

Superfish dropdown menu appears behind #main-wrapper, since is not only the Galleria slideshow.

Thanks a lot!

sbakshian’s picture

sbakshian commented
StatusFileSize
new Screen Shot 2011-12-22 at 9.54.23 PM.png210.64 KB

@incrn8 Thank you very much!!! :)

This helped with most of my problem. My main pull down menus work great. But the children menus get cut off by the items in the main pull down menu. Is there something else that I need to add to the ie7-fixes.css to have children menus show up properly?

Thanks again,
Sam

ps I am attatching a sceenshot to hopefully get my point across.

empowerbpo’s picture

empowerbpo commented

Thanks for Solution i am happy with this. thanks again.

Jason.
LMS

benitezv1ang’s picture

benitezv1ang commented

worke for me too with tb-purity theme
#menu-bar-wrapper {
position:relative;
z-index:498;
}
#slideshow-wrapper {
position:relative;
}

nimanemati’s picture

nimanemati commented
Title: Superfish dropdown menu appears behind Galleria slideshow in IE7 » Search region behind slideshow and menu in IE7
Version: 6.x-1.0 » 7.x-1.0-alpha2
Assigned: Unassigned » nimanemati
Status: Closed (fixed) » Active

Dear Friends,

I am working on Danland theme on localhost and i need to change the Slideshow effect and also add navigation on bottom of the Slideshow.
I have changed the effect in jquery.cycle.all according the last post but it doesn't appear based on changes and show the fade effect as originally!

Also i have another question and pls response on this. when i brows the website by IE, the logo and other elements in search region appear on back of or front of the slideshow and doesn't show on top of Slideshow.
This issue is fixed on Firefox browser!

Awaiting your kind support.
Thanks.

Poieo’s picture

Poieo commented
Status: Active » Closed (won't fix)

@nimanemati - Wrong theme. Please post your issue in the Danland issue que.

Closing this as won't fix as all new development is in the 7.x-2.x branch. It this is still an issue there, feel free to reopen.