Superfish jQuery Menu IE z-index Bug

Superfish jQuery Menu IE z-index Bug

The IE z-index issue:

I really like this dropdown menu and in Firefox (as almost always) everything worked properly. But then I tested in IE. The source code was similar to this

<div id="header">
    <div id="nav" class="sf-menu">Here the menu</div>
</div>
<div id="content">Here the content</div>

Both the header and the content div have position:relative. In IE the dropdown menu was displayed under the content div so the links in the dropdown were not clickable though the z-index of the menu list was set to 100.

The fix is so simpel:

After a bit of research I came accross the IE z-index Bug on Klog - php, linux, ajax, javascript. On this page Kae Verens describes the bug and gives an example. But the solution was some kind of unsatisfactory for me. But one of the commenters - Michael - posted a very simple solution.

You do not have to set the z-index on the menu or its children but on the two position:relative elements header and content (in my example). So I set:

#header {
    z-index:2;
}
#content {
    z-index:1;
}

and the problem was fixed! Thanks to Michael. This is basic CSS knowledge, but once you dived into the menu’s css it is hard to see :-|

Relevant Links:

Tags: , ,

45 Kommentare zu Superfish jQuery Menu IE z-index Bug

james
13. November 2008

Hi, after much research and reading about iframes and other horrible fixes, this was the answer. So simple. A valuable lesson learned. Many thanks for posting!

Kurtlar Vadisi
19. November 2008

woow very nice :) thanx.

webdemar
20. November 2008

@james:

Exactly! It is so simple, but though you have to know. I didn’t and could have gone crazy with this ;-)

Timid&friendly
16. Dezember 2008

WoW man even IE6 obeys. This has saved my life!

Thx so much for taking the time to post this.

Alex
5. Januar 2009

Nice one! I read the klog post before reading this and somehow I had missed Michael’s solution! I was having the exact same problem as you (including the superfish menu). You nailed it, mate!

Tim Fletcher
23. Januar 2009

Wow. This is ESSENTIAL CSS knowledge. Thanks sooo much for posting this! Saved me rewriting a load of jQuery. Thanks!

Tony Gray
25. Januar 2009

Great fix! Just what I needed. Thanks!

Tim
27. Januar 2009

I have been looking every for this fix. So, so simple. I had tried z-index everywhere else, but actually having read up on the attribute this solution makes perfect sense.

thank you.

webdemar
27. Januar 2009

@Timid&friendly:
I was surprised too :-)

@Alex:
Happy I could clear things up.

@Tim Fletcher:
That’s what I thought when I found this fix.

@Tony Gray:
Welcome! :-)

@Tim:
Yeah, it is soo simple but hard to see once you dived into the menu css trying to find the fix there :-|

WPCult
11. Februar 2009

I am curious to know what your PHP code is you used to output your page menu? Are you using the new wp_page_menu? Would you care to share?? I would gladly give you credit and put a little tutorial together on my site! Or if you would like to write it..

Thanks!

Simon [webdemar]
11. Februar 2009

@WPCult:
To use the new function wp_page_menu() is possible but not necessary. To output a superfish menu in WordPress you just need an unordered list of your pages or categories with the subs as child lists:

<ul>
    <li>Parent item</li>
    <li>Parent item
        <ul>
            <li>Child item</li>
            <li>Child item</li>
        </ul>
    </li>
    <li>Parent item</li>
</ul>

As you might know you get these lists by using wp_list_pages or wp_list_categories. The only things to do is to implement the superfish plugin and apply the css class sf-menu to the list:

<ul id="any-id" class="sf-menu">
    <li>Parent item</li>
    <li>Parent item
        <ul>
            <li>Child item</li>
            <li>Child item</li>
        </ul>
    </li>
    <li>Parent item</li>
</ul>

I published a post (German) on how to get superfish running in a normal website and wanted to write the second part (German) on how to make a superfish menu with WordPress.

But anyhow, please write this tutorial and I would to link to this article since I just cover the German superfish fans ;-)

Paul
13. Februar 2009

This works great! Thanks. I had to use “!important” at the z-index definition though to make it work.

Faly
17. Februar 2009

Merci bcp pour ce fix

Dror
5. März 2009

Thanks mate, very simple but was hard to find (-;

Claude F
9. März 2009

Can anyone help me, I hve tried a few configuration and I cannot seem to be able to do it :(

Website is: http://www.ultimate3rivieres.org

Thanks

Claude

Simon [webdemar]
10. März 2009

@Claude:
Hey Claude. Please give some more details of your problem. As far as I can see the menu on your page is working right.

Claude Ferron
10. März 2009

Thanks for your time.

Well in Firefox it is alright but in IE 7 or 6 if you look under the second item in the menu (L’ATRUF) it goes behind the text… same is true for the options in the menu (except it is not apparent like the 2nd one)

http://www.ultimate3rivieres.org/v2/index.php

Thanks

Simon [webdemar]
10. März 2009

@Claude:
That’s because you didn’t put any z-index. Put you menu in another div (e.g. menu) and give it a z-index 2. The div#wrapper wraps the content and has to go under this menu div. So give it a z-index 1 in the stylesheet.

Claude Ferron
10. März 2009

Grrrrrr…. won’t work….

Claude F
12. März 2009

It seem that my CSS file was deleted anyway I can send it to someone so you can have a look?

Thanks

Claude

Christian
16. März 2009

Thanks webdemar for the great deFusion Theme. It looks great and it’s exactly the kind of theme I was looking for, but unfortunately I cannot get the dropdown-menu to work properly in IE 6. I set the z-index as described but still it’s not working for me with the IE. I’d really appreciate your help.
Thanks, Christian

cyberlord
18. März 2009

Another solution (worked for me):
just add in your css
.sf-menu, .sf-menu * {
z-index:1000;
}
fixes IE7! funny: IE6 worked w/o this

Achton
23. März 2009

BEST .. TIP .. EVER!
You saved me after hours of tweaking, and z-indexing the header div was really all it took. Thanks!
(And screw you, IE7)

Cory Conroy
24. März 2009

I have been fighting with superfish.
I can get it to run the dropdown smooth but th menus have Dark Blue and White.
I would like to have all of the menu items to be in white.
Any Ideas?

Cory Conroy
24. März 2009

I can send the CSS file to anyone that is willing to help.
Thanks

Manuel
24. März 2009

Danke danke danke!

Du hast meinen Tag gerettet. Ich musste einfach die Positionierung von #Header und #Content auf relative setzen! Der IE macht mich fertig und nur wegen dem habe ich heute 2 Stunden lang z-index-Werte beliebigen Elementen zugewiesen. Aber es hat ein Ende.

Viele Grüße

John
24. März 2009

Thank you SOOOO much!! I thought i was going crazy when even adding position:relative and z-index to everything didn’t work. Best. Post. Ever.

Simon [webdemar]
27. März 2009

@cyberlord:
Thanks! :-)

Alexandru
7. April 2009

Hi webdemar,

I have the same issue, tried z-index stack for both divs, nav & main. Would it be in my case that the content is a flash movie? I tried also the wmode for flash to transparent, but IE7&8 seems to ignore. I am on MODX with superfish down there.
http://regentcasino.ro/beta
Thanks for any idea and your time.
Alex

Tim Fletcher
7. April 2009

This tip is beyond awesome. It has saved me from hours of IE6 hell more than once. Great work!

saeed
18. April 2009

It is a well known bug with IE6 and 7 see the link for details:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Simon [webdemar]
20. April 2009

@Alexandru:
Since I’m not an expert in jQuery at all I would recommend that you post your question in the jQuery Mailing List. You’ll get an answer there.

el_p
23. April 2009

Thanx … it was usefull for me !

Nathan
30. April 2009

Sh#t the bed. Who would have thought it could be that simple. Thanks heaps for posting this and thanks to Michael for the solution. You have saved a bucket load of hassle for me!!! =]

Stefano
12. Mai 2009

Oh man, I love you.

The Cat Lover
13. Mai 2009

Thank you, I almost gave up because of this bug! But it seems that if there is a bug, there is alway (or almost) a fix for it :)

Cheers

Mad Max
14. Mai 2009

Really just at those codes to the header and content in the main stylesheet and it’ll work in IE?????

James Pearson
18. Mai 2009

Thank you so much for this post. I was nearing despair after switching from a MooTools menu script to Superfish. Thanks for sharing such a simple fix.

Qutaiba
26. Mai 2009

Man, really really really thank you….
you saved my life

Cheers from Jordan

TJ
26. Mai 2009

Thanks very much for this, It was of great help to me…

Kudos

Filip
27. Mai 2009

This is greatest fix…
but I can’t find
#header {
#content {
So if someone can point me where to search.
I work on some joomla template and I searched in all .css but not luck.
So if you can answer me it would be very helpful.
Thanks in advance.

Regards,
Filip

Simon [webdemar]
27. Mai 2009

Hey Filip,
the IDs #header and #content are just examples for explanation. You have to find the div that contains the superfish menu and give it a higher z-index than the div that contains the content that is supposed to be under the dropdown menu.

sadasd
9. Juni 2009

adding

.sf-menu, .sf-menu * {
z-index: 9999999 !important;
}
worked for me

[...] multi-level dropdown menu (IE problems?) [...]

Pickle
28. Juni 2009

Good solution!!!!

thx

adding

.sf-menu, .sf-menu * {
z-index: 9999999 !important;
}
worked for me

Sag Deine Meinung!

Für das Hosten von WordPress Blogs empfehlen wir Webspace von Hostloco. Für alle Schweizer: Kourtis-Solutions.ch.

Sciabb sagt zu Display Recent Posts without Plugin:
Where do you exactly place the code $recent = new WP_Query(”showposts=5&...

Meg Stefani sagt zu WordPress Theme deFusion 0.8:
The Theme looks great....

Pickle sagt zu Superfish jQuery Menu IE z-index Bug:
Good solution!!!! thx --- adding .sf-menu, .sf-menu * { z-index:...

Jared sagt zu Aktuelle Kategorie in der Post-Einzelansicht hervorheben:
Ja so ungefähr habe ich es bei mir auch gemacht. Nur den Home Button habe i...

Simon [webdemar] sagt zu Aktuelle Kategorie in der Post-Einzelansicht hervorheben:
@Jared Den Code habe ich in der Zwischenzeit auch erweitert. Das könnte ...