Superfish jQuery Menu IE z-index Bug

6. November 2008 - jQuery, Webdesign - 162 Kommentare

Superfish jQuery Menu IE z-index Bug

As a good and stable dropdown menu I’m using the Superfish jQuery menu plugin by Joel Birch. Superfish is an enhanced Suckerfish-style menu jQuery plugin that is quite easy to customize. With a lot of options it can be tailored to your needs. But thanks to our friend IE you might experience the z-index bug. The fix is very simple!

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:

Autor

Moin, ich bin Simon und ehemaliger Betreiber dieses Blogs.

RSS abonnieren

und so weiter...

Kommentare

  • james - am 13. November 2008 - Antworten

    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 - am 19. November 2008 - Antworten

    woow very nice :) thanx.

  • webdemar - am 20. November 2008 - Antworten

    @james:

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

  • Timid&friendly - am 16. Dezember 2008 - Antworten

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

    Thx so much for taking the time to post this.

  • Alex - am 5. Januar 2009 - Antworten

    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 - am 23. Januar 2009 - Antworten

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

  • Tony Gray - am 25. Januar 2009 - Antworten

    Great fix! Just what I needed. Thanks!

  • Tim - am 27. Januar 2009 - Antworten

    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 - am 27. Januar 2009 - Antworten

    @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 - am 11. Februar 2009 - Antworten

    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] - am 11. Februar 2009 - Antworten

      @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:

      • Parent item
      • Parent item
        • Child item
        • Child item
      • Parent item

      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:

      • Parent item
      • Parent item
        • Child item
        • Child item
      • Parent item

      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 - am 13. Februar 2009 - Antworten

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

  • Faly - am 17. Februar 2009 - Antworten

    Merci bcp pour ce fix

  • Dror - am 5. März 2009 - Antworten

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

  • Claude F - am 9. März 2009 - Antworten

    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] - am 10. März 2009 - Antworten

      @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 - am 10. März 2009 - Antworten

    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] - am 10. März 2009 - Antworten

      @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 - am 10. März 2009 - Antworten

    Grrrrrr…. won’t work….

  • Claude F - am 12. März 2009 - Antworten

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

    Thanks

    Claude

  • Christian - am 16. März 2009 - Antworten

    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 - am 18. März 2009 - Antworten

    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

    • Simon [webdemar] - am 27. März 2009 - Antworten

      @cyberlord:
      Thanks! :-)

    • Mike - am 11. Januar 2010 - Antworten

      I’ve been going crazy about this, thank you for sharing your profound genius work! :)

    • Claudiu - am 3. Februar 2011 - Antworten

      .sf-menu, .sf-menu * {
      z-index:1000;
      }

      worked for me too ;) 10x

  • Achton - am 23. März 2009 - Antworten

    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 - am 24. März 2009 - Antworten

    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 - am 24. März 2009 - Antworten

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

  • Manuel - am 24. März 2009 - Antworten

    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 - am 24. März 2009 - Antworten

    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.

  • Alexandru - am 7. April 2009 - Antworten

    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 - am 7. April 2009 - Antworten

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

  • saeed - am 18. April 2009 - Antworten

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

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

  • el_p - am 23. April 2009 - Antworten

    Thanx … it was usefull for me !

  • Nathan - am 30. April 2009 - Antworten

    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 - am 12. Mai 2009 - Antworten

    Oh man, I love you.

  • The Cat Lover - am 13. Mai 2009 - Antworten

    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 - am 14. Mai 2009 - Antworten

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

  • James Pearson - am 18. Mai 2009 - Antworten

    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 - am 26. Mai 2009 - Antworten

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

    Cheers from Jordan

  • TJ - am 26. Mai 2009 - Antworten

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

    Kudos

  • Filip - am 27. Mai 2009 - Antworten

    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] - am 27. Mai 2009 - Antworten

      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 - am 9. Juni 2009 - Antworten

    adding

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

    • Ken the Tech - am 18. Juli 2010 - Antworten

      as a matter or fact, the !important declaration is not recognized or partial only recognized by IE.

  • Pickle - am 28. Juni 2009 - Antworten

    Good solution!!!!

    thx

    adding

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

  • greenbee - am 14. Juli 2009 - Antworten

    CYBERLORD!! (yes, I am shouting!) You are awesome. Your fixed worked perfectly. Thank you!

  • andyM - am 17. Juli 2009 - Antworten

    seems to be nice solution, but does not work for me :(

  • Matt - am 28. Juli 2009 - Antworten

    Wow you’re the greatest!! So simple!

  • Old Republic - am 28. Juli 2009 - Antworten

    I originally tried this method and I couldn’t get it to work no matter what I did.

    A friend suggested using this technique but setting the z-index of the culprit container to -1.

    In this example it would be the same as setting the content div to z-index: -1;

    Worth a try if the original method doesn’t work.

  • Matt - am 5. August 2009 - Antworten

    Thanks for the very simple solution. You just saved my day.

  • Leslie Freeman - am 18. August 2009 - Antworten

    Thanks so much!

  • Claude F - am 23. August 2009 - Antworten

    I have tried this without success, anyone could help me? I’m used to play around with code, but this one in worthless :( I agree it is so simple, but I can’t make it work on my side!!! My e-mail cferrongmailcom

  • webdev - am 24. August 2009 - Antworten

    the solution is good but it didn’t work for me…can anyone help me on this..its very urgent

  • Edith Karnitsch - am 25. August 2009 - Antworten

    You’re the man! Yes, it works! I had superfish drop-down sliding behind a jQuery slideshow and a “position:relative” div box .. and changing the z-index as outlined above did it!

    PS: the problem seemed to occur whenever the dropdown was supposed to go over an element with “position: relative;” (regardless of z-index values) in IE7. Applied fix exactly as above & solved :)

  • Pelar - am 26. August 2009 - Antworten

    Holy mother of God. I am busy to get this problem solved the whole day. This post wasn’t the answer as well. What DID help was this:

    Remove the “overflow:hidden;” out of the elements where the menu is positioned.

  • ilz - am 31. August 2009 - Antworten

    Worked for me after adding position:relative to the nav-div and the above z-index method

  • Randolph Romero - am 31. August 2009 - Antworten

    hi i have a problem on the enu on my website on ie6 the menu appears behind the text or content of the headers, in ie8 the menu is not animating. please i need your help.

    kindly check leentechsystems.com/clients/printdivas

  • Rakesh - am 31. August 2009 - Antworten

    Hi,

    I am using jQuery for my site. I am facing the problem in IE7 with Z-Index. I have tried your code but it didn’t solve the issue.

    I am facing the error at http://taste-expo.com

    There is a logo box which is shifted down by 16 pixel.

    Please help.

  • Glyn - am 7. September 2009 - Antworten

    Thanks for a very easily googleable (and good looking) page. Helped me in minutes -respec.

  • Andy - am 9. September 2009 - Antworten

    Thanks a lot for this fix :)

  • Alix - am 17. September 2009 - Antworten

    Super genial! Deine Seite habe ich schnell gefunden und hat wunderbar funktioniert. Ich wünschte die IE6 Fixes wären immer so simple. Vielen Dank!

    • Simon [webdemar] - am 17. September 2009 - Antworten

      Wenn alle Fixes so einfach wären, hätten Webdesigner keine natürlichen Feinde mehr :-D Nee, natürlich hast Du Recht!

  • denis - am 19. September 2009 - Antworten

    Worked for me in IE8 thank you a million, what i had to do though was add the z-index to the superfish.css file as i had too many z-indexes in the the main style.css file and just by adding a z-index: 10; to the superfish.css file all worked just fine!

    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    >> z-index: 10; /*to fix IE8 submenu*/ <<

    Vielen Dank!

  • Julian - am 21. September 2009 - Antworten

    My first drop down menu plugin working. I`m happy….. thanks for all… There is a problem for me.. Plugin Shows drop down pages only if i click on the parent one. :( . Can we fix this to show it without click ? Thanks

  • neel - am 25. September 2009 - Antworten

    Nice solution for that problem.. I solved that issue using your trick

  • Konstantin Krutov - am 30. September 2009 - Antworten

    Thank you, you just saved me a lot of debugging work!!

  • atsiot - am 7. Oktober 2009 - Antworten

    Unfortunately, this solution does not work for me. I have a slider bellow the superfish menu. But, in IE the slider hides the submenus of superfish.
    Any idea?

  • Casey Carnnia - am 26. Oktober 2009 - Antworten

    none of these worked for me.
    i finally fixed it like this (in superfish.css)
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background: #15234A; /*21438D CFDEFF*/
    outline: 0;
    z-index: 999999;
    }

  • cooli - am 27. Oktober 2009 - Antworten

    Hmm my menu is not working in forefox or IE, and those fixes dont work, blah any1 can help?

  • Alan Schietzsch - am 14. November 2009 - Antworten

    Thank you so much for this – it saved a lot of time searching to find the elements that had no z-index.
    cooli: in superfish.css .sf-menu, sf-menu * {
    I added the line z-index: 5;
    and then on html page, the content container has less z-index:2; which puts (5=menu) above (2=content) which works in my case.

  • romaspit - am 14. November 2009 - Antworten

    Thank you Simon! After hours of searching for a solution, this finally fixed the problem!

  • John Fox - am 15. November 2009 - Antworten

    Superb! You are a genius! Thank you.

  • Rakesh - am 17. November 2009 - Antworten

    Thank you so much!! This saved me a lot of time.. :)

  • Mageshwaran - am 17. November 2009 - Antworten

    Hi,
    The superfish dropdown menu Sublinks are not clickable while the flash is in content part. But it is working fine in FF except IE.

    If any one help me to resolve the problem ?

  • pham hong phuc - am 18. November 2009 - Antworten

    Thank you very much. It is very useful for me.

  • Paul Amador - am 19. November 2009 - Antworten

    Searching my style.css file for the superfish div, i do not know what keywords i am looking for. can anyone help me? website: http://www.dancefordonors.org

  • km - am 27. November 2009 - Antworten

    Thank you very much for posting this smart solution!

  • goldlilys - am 5. Dezember 2009 - Antworten

    Thank you very much for this VERY USEFUL and simple solution. I’ve searched so many other sites, and none of them worked. Now I don’t have to worry about IE … when it comes to the menu at least.

  • Mike Croteau - am 6. Dezember 2009 - Antworten

    OH MAN!!!! Its such a no-brainer that Im embarrassed that I ran into this issue. After MANY google searches, I came across this article… and you were absolutely right! My content was overlapping over the menu… after setting the z-index on the content div lower than the menu wrapper… VIOLA! I was banging my head against the monitor… cant thank you enough!

    Best,
    Mike

  • indialike.com - am 8. Dezember 2009 - Antworten

    This is really very good… Thanks

  • Michael - am 8. Dezember 2009 - Antworten

    Hey!!
    really really thanks for this!! itg was driving me crazy until I find your “repost”

    Thanks, Michael

    • Wouter - am 9. Dezember 2009 - Antworten

      Where do I put the code? In the header of the template?
      1. #header {
      2. z-index:2;
      3. }
      4. #content {
      5. z-index:1;
      6. }

  • Brando - am 21. Dezember 2009 - Antworten

    Thank you thank you thank you. Your post was a perfect easy fix for a stupid IE problem!

  • M4730 - am 22. Dezember 2009 - Antworten

    Excelente solución! estuve con este problema desde hace más de un mes… Muchas gracias…!!!! Saludos desde Paraguay

  • freebeauty - am 27. Dezember 2009 - Antworten

    awesome!!!!!!!!!!!!!!!!!!!!

  • matt mcinvale - am 15. Januar 2010 - Antworten

    i was ready to give up, then i found your post, thank you thank you! i spent almost 2 hours working on 1 IE7 bug.

  • Polleke - am 15. Januar 2010 - Antworten

    Hi Guys,
    i just cannot get it to work. I tryed the #header and content solution but i could not find these items in any ccs. I also tryes the z-index in superfish.css but that also does not work. Is there anyone who can help me the site is http://www.sailcenterloosdrecht.nl/
    regards Jan

  • @nomadone - am 17. Januar 2010 - Antworten

    Thanks a ton, final something which fixes the problem. First time I actually encounter this problem. Your fix is so simple and works perfectly. Much appreciated

  • Dawid Ciężarkiewicz - am 20. Januar 2010 - Antworten

    Thank you. You’ve just finished my 4h session of cursing. :)

  • Mohsen - am 23. Januar 2010 - Antworten

    Thanks man, simple and working

  • Ricky - am 27. Januar 2010 - Antworten

    You’re a Legend.

  • Prakash - am 11. Februar 2010 - Antworten

    All drop down menus are displaying while refreshing every time..
    The time it required for executing superfish.js all menus are dsplaying together for some seconds. Please give me the solution to avoid this improper css view.
    Is it required any additional menu caching component to achieve good performance. Kindly help me to find the solution

    Thanks
    Prakash

  • Ritesh - am 16. Februar 2010 - Antworten

    Thnks

  • Adam Chambers - am 3. März 2010 - Antworten

    Great post. I first I thought it was not working for me, then I realised I needed to go another element up the document flow.

    Thanks!

  • Vince - am 4. März 2010 - Antworten

    Spent about 20 hours searching for a solution to my SPRY menu z-index problem. Just found your solution a few minutes ago. Edited two selectors in my CSS and problem solved!
    Thanks so much!

  • Jesus - am 8. März 2010 - Antworten

    Hi folks,
    I already tried solution son this page and cant figure it out, any help will be appreciate it! Here its the page i’m working with.
    http://www.mundoregio.com/clasificados-monterrey/anumex/

  • matthias - am 14. März 2010 - Antworten

    Hallo,
    ich habe ein Problem mit einer vertikalen superfish-Navigation unter IE6. (www.helpenstein.com)
    Die Navigation wurd nach rechts verschoben angezeigt. Hat jemand eine Idee woran das liegen könnte.

    mfg
    matthias

  • Benson - am 29. März 2010 - Antworten

    I use the same way to fix jquery lightbox issue.
    but still fail to do the aciton.

  • Justin Goodlime - am 1. April 2010 - Antworten

    Sweet fix, danke.

  • 5-squared - am 22. April 2010 - Antworten

    Thank you! Just saved me hours of IE hell ;)

    Really appreciate it!!

  • Leon - am 28. April 2010 - Antworten

    Worked like a charm!!! thank you!

  • Olga - am 14. Mai 2010 - Antworten

    Please, help me!!! I have this problem, I tried all recommendations, but it is not work with my site…
    If some body can look it, i will be happy! I so need it! Thank you!
    http://semcleaning.biz/

    • anjum - am 26. Mai 2010 - Antworten

      Hye

      i did check ur menu i believe its in template.css line number 133 please remove overflow:hidden. It might work

      :)

  • Joel Glovier - am 26. Mai 2010 - Antworten

    Oh thank God…and the author of this post also. After searching and reading several posts filled with answers on this issue, this one finally worked for me!!!

    I think it’s clearly very revealing that there are comments to this article dating back to a year and a half ago, but still this month developers are finding this solution helpful. Microsoft needs to seriously discontinue those old school browsers and stop supporting them entirely.

    (the site in question for me that this fix worked on: http://betawww.helpcurenow.org)

  • Hilary Hoolahan - am 30. Mai 2010 - Antworten

    Thank you SO much – what a great fix. I spent ages last night fiddling around with my z-indices on all sorts of CSS elements to try and get my drop down menu bar going over the text I had nearby. I kept reading your solution but couldn’t fathom out how to integrate it into my CSS.

    Then this monring with fresh eyes I re-looked at it and tried it so my NavBar had a Z-Index 2 and my BodyText Z-index 1 (and ignored the fact that other elements of my CSS had Z-indices of 1000,1010 and 1020) and it worked great!

    Thank you again – this has saved me hours of frustration!

    Hilary

  • Dexter - am 31. Mai 2010 - Antworten

    Thank you very much for this post.. I researched on complicated solutions involving javascripts and jQuery but the solution posted here is very simple man Thanks a lot..You literally saved my ass..

  • Tomo - am 6. Juni 2010 - Antworten

    Viel danke :) .

  • G - am 11. Juni 2010 - Antworten

    I wish I’d found this like 8 HOURS AGO!!!! Many thanks. If you’re ever in Seattle, WA I’d love to buy you a beer!

  • johnykaralis - am 11. Juni 2010 - Antworten

    Hi i am facing the following problem.
    in IE8 drop down menu works fine but in firefox and in chrome the drop down menu goes behind main div.
    i have putted z-indexes to both header and main div. but it doesnt work in firefox and chrome.
    link is http://www.gamosbook.gr
    thanks

  • Russell - am 14. Juni 2010 - Antworten

    It’s a heavy weight sledgehammer solution but this page from Vance Lucas worked for me.

    http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

    Everything seems okay now in Chrome, IE7, IE8, Safari5 and FF3.6

    I couldn’t do anything about the position:relative settings of my page as I was using
    http://code.google.com/p/css-template-layout/ to position my divs

  • drava - am 16. Juni 2010 - Antworten

    Awsome solution! Thanks a bunch!

  • lorem - am 17. Juni 2010 - Antworten

    i spent an hour trying to find the right z-index .. nothing worked, your solution is brilliant. However this worked better for me in all browsers:

    #header * {
    z-index:1000;
    }
    #content * {
    z-index:1;
    }

  • Richard - am 18. Juni 2010 - Antworten

    My submenu in IE8 has a gap between the menu and my sub submenu. Any Ideas?

  • imaria - am 21. Juni 2010 - Antworten

    Thanks! Worked great!

  • mtsweir - am 13. Juli 2010 - Antworten

    thanks a million!

  • Nick - am 18. Juli 2010 - Antworten

    Thanks a bunch! spent half a day trying to fix this issue, I was on the brink of a meltdown! you saved me dude! :)

  • James - am 18. Juli 2010 - Antworten

    OMG saved my life. THANKS!

  • Ken the Tech - am 18. Juli 2010 - Antworten

    tried everything, not working.

    I added z-index with a higher value for the container div of the ul.menu than the z-index value of the .middle which is right below the nav menu. Nothing happen, the menu is still hidden in IE6.

    I’ve tried also the add position:relative for these divs. The same result.

    Any other workaround?

    thx.

  • Martin Montgomery - am 21. Juli 2010 - Antworten

    Thank you SOOOOOO much – this worked for me on the frontpage slideshow and superfish menu combination.

    The div of the header, the slideshow component and the container needed set for me. (3 z-index’s needed)

    Really appreciate your post!

  • AnilG - am 27. Juli 2010 - Antworten

    Yes but MSIE 7 has problems using z-index and iframe or just has problems with z-index where content below is now unclickable. Nobody seems to know this and googling this issue just gets miles and miles of posts about ie6 issues on z-index.

    Using the following CSS was crucial for me in making content overlap properly and still making the lower content clickable when the menu wasn’t floating over, in MSIE7

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

  • aslan - am 2. August 2010 - Antworten

    thanks for sharing..

  • Zamshed Farhan - am 4. August 2010 - Antworten

    Nice job :) really helpful.

  • Nicholas Ritchey - am 9. August 2010 - Antworten

    Thanks a ton — helped me fix my SuperFish problem as well!

  • Hans Blaettler - am 1. September 2010 - Antworten

    thanx for posting & sharing this great lifesaver!

  • fragmented - am 2. September 2010 - Antworten

    Viele Danke! We say in England “You are THE nuts!” cheers :)

  • nadshez - am 2. September 2010 - Antworten

    Add to your list another big thanks

  • Tomek - am 3. September 2010 - Antworten

    What can I say, THANK YOU ! ;) i spent 4 hours with no result, and solution was simple. Thank You again!

    Tomek

  • Jens - am 6. September 2010 - Antworten

    Thank you!!!!!

  • Eduard Seifert - am 7. September 2010 - Antworten

    Wie oft mir dieser Trick schon geholfen (auch ohne Superfisch) … Klasse.

  • Erick Cardoza - am 29. September 2010 - Antworten

    Awesome.. simple but hard to guess if you’re not looking for it..

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

    worked for me as well…

  • Zahoor - am 14. Oktober 2010 - Antworten

    Nice solution, thanks

  • Scott - am 31. Oktober 2010 - Antworten

    Thank you sooo much, I’ve spent about three hours trying to figure this out!!

  • enursa - am 18. November 2010 - Antworten

    thanks for you. It really help me. really simple but really amazing result.

    Try to check it. I applied in my themes. http://wordpress.bloggertemplateplace.com/?themedemo=Ngawitan

    Best regard.

  • Ryan Hanau - am 19. November 2010 - Antworten

    Yes! I suffered from this problem with my Drupal site and couldn’t find the answer. I tried changing the z-index on various menu items, but didn’t know it should be on the parent items!

    Thanks

  • Ian - am 19. November 2010 - Antworten

    Thanks for this – an excellent explanation. I think that the link to the michael comment on Kae Verens blog has changed, it should be: http://verens.com/2005/07/15/ie-z-index-bug/comment-page-1/#comment-309

  • Jason - am 24. November 2010 - Antworten

    Thanks dude!!

  • wahoooos - am 25. November 2010 - Antworten

    THANKS!!!! That works great :-)

  • Jaddis - am 14. Dezember 2010 - Antworten

    Thanks so much this was exactly what I needed!

  • Stewart - am 16. Dezember 2010 - Antworten

    I love you. Thanks! Often the simplest explanation is best. Chur

  • Chez - am 28. Dezember 2010 - Antworten

    OMG!!!!!!! Oh my goshhh
    I’ve been searching for hours now and this is the simplest fix for frigging IE7!!!!!
    Omggggg…
    Thank u so much!!!

  • Mike - am 7. Januar 2011 - Antworten

    Man, I love you.

    I spent hours trying to fix it.
    It works!!!!

    Thank you

  • AJ - am 15. Januar 2011 - Antworten

    Easy fix. Thanks!

  • leyk - am 21. Januar 2011 - Antworten

    I’m sorry but i couldn’t find the superfish container div….can anybody point me how i can do that….i mean i’ve read all the comments and everybody seems very happy but forgot how exactly to find the div containers???? Please help help….anyone….I hate IE, the sub menus of superfish menu are hiding behind the content on the right…..can anyone have a fix for this one…..?what can i do to make it work????

  • Sardar Younus - am 22. Januar 2011 - Antworten

    Thanks sadasd!

    Your solution also worked for me to!

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

  • Dimerbox - am 31. Januar 2011 - Antworten

    Thanks so much , can’t believe its that simple!

    Thanks,
    D

  • naughtyric - am 3. Februar 2011 - Antworten

    nice post, thanks for sharing,,

  • Bhupen - am 9. Februar 2011 - Antworten

    thanks because of your hint you made me proud in front of my boss. thanks a lot..

  • Peter - am 16. Februar 2011 - Antworten

    Thank you so much, for such an easy solution it was quite hard to find!!!

  • nellbryant - am 2. März 2011 - Antworten

    OMG!!!

    It worked. Thanks for sharing!

  • Sean A - am 2. März 2011 - Antworten

    Man, I was up at 6 Am trying to figure out why my jquery sideshow is covering my menu.
    I knew it was a z-index matter, but couldn’t figure out on which element. Thanks so much for the quick fix!! I was able to present the website a few hours later with a working menu!!!

    Sean,
    San Diego, CA

  • nopa - am 5. März 2011 - Antworten

    Thx alot!
    easy and usefull!!!
    cheers!

  • elaine - am 14. März 2011 - Antworten

    Thank you so much! This solution worked for me!

  • Keith - am 30. März 2011 - Antworten

    WOW!!!! You saved my life with this. I literally spent ALL day looking for a solution before I found your post. THIS IS THE ONLY THING THAT FIXES IT!!!!!! I tried EVERYTHING everyone else was suggesting and nothing worked!!!! I was about to give up and just pull the Flash piece from the site. Thank goodness for this post. Just like someone else said, an easy solution but hard to find. THANK YOU!

Trackbacks

Deine Meinung