Fixing IE7 Z-Index Issues with jQuery

September 22, 2008 | Posted In Javascript, jQuery by Vance Lucas 75 Comments »

For some reason, Internet Explorer 7 does some pretty funky things, and has several known bugs with it’s rendering engine that drive web developers like me crazy.  While most of the known bugs occur in relatively obscure situations and go largely unnoticed, there are a few that really stick out and cause web developers to waste many hours trying to fix them.  The way IE7 renders z-index stacking orders is one of them.

One way to fix many of the issues with IE7 is to dynamically reverse the default z-index stacking order of the elements on your page. This will ensure the elements higher in your HTML source will also have a higher z-index order on your page, solving most of the IE stacking issues. If you’re using jQuery (the best Javascript library there is), here’s the quick fix:

1
2
3
4
5
6
7

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

This code will start with a z-index of 1000, and decrement the z-index for each DIV element of the page by 10, giving the first DIV a z-index of 1000, the second, 990, the third 980, and so on. Notice that the selector will find all DIV elements with the code “$(‘div’)”, using the same syntax as CSS selectors. If your HTML code has different requirements, feel free to change the code or the selector to suit your needs by following jQuery’s documentation on selectors.

Update for MooTools (04/14/2009):

A generous commenter has posted the code for fixing z-index issues with MooTools 1.2:

1
2
3
4
5
6
7

if(Browser.Engine.trident){
	var zIndexNumber = 1000;
	$$('div').each(function(el,i){
		el.setStyle('z-index',zIndexNumber);
		zIndexNumber -= 10;
	});
};

Tags: ,
Hire Me

Have a problem you need help solving?
I'm available for freelance work. (and I love solving hard problems)

Trackbacks

Comments

  1. Chad, on November 13th, 2008 at 12:51 pm

    You have just saved me some serious grief. I’ve been fightin a dropdown showing over the wslide.js on IE7 for days now. Thanks for the fix.

  2. Ryan, on December 7th, 2008 at 10:22 pm

    This tip solved the issue I was messing with for the last 5 hours.

    I have multiple Suckerfish menus on a page (a flyout list of social site links below article summaries on an article archive page) and in IE7 the menu button _below_ the active suckerfish menu would show _above_ the active menu. It was driving me mad.

    Thanks a ton for posting this solution.

  3. Simon, on January 15th, 2009 at 10:10 am

    You have no idea, you’ve just save my life!
    Thanks so much !

  4. John, on January 24th, 2009 at 11:08 am

    WOW this was an awesome fix, i spent hours trying all kinds of css hacks but this works like a charm espically if you got jquery runing!!

  5. Lorenzo, on January 28th, 2009 at 6:48 pm

    Thank you Vance, your hack works well!

    One suggestion to other guys facing the same problem: you can add some extra jQuery code after Vance’s one to force spcecific elements of the page to have a z-index greater that the intial set value.

    Vance’s example starts with z-index=10000, so if you want to (for example) your dropdonw menu to appear over every other element, just set its z-index value to 20000.

  6. mahesh, on January 29th, 2009 at 2:45 am

    thanks ……… this z-index ie7 jQuery really help’s me , before i am scared of z-index problem in ie , now i am cool about z-index , really its working fine …….thanks once again………….

  7. Greg, on February 7th, 2009 at 6:58 pm

    Worked perfectly thanks !

  8. rich, on February 12th, 2009 at 12:04 pm

    hi thanks for this fix, I would like to have certain specific elements have a greater z-index than inital set vale as lorenzo suggests, however am not sure what extra jQuery code i need to do this, have tried

    $(“.bridge”).css(“z-index”,”50000″); but dosent seem to have any effect, if anyone can point me in right direction be much appreciated

  9. Erik Rydeman, on February 20th, 2009 at 10:30 am

    Wow, that solved our problems for both IE6 and IE7. Thank you sir!

  10. OES, on February 26th, 2009 at 8:03 am

    Just amazing. I was going through the whole bloody net trying to solve this problem. Very simple fix for page were you have a good work flow.

    Thanks !!

  11. Liam, on March 3rd, 2009 at 5:56 am

    MooTools 1.2 version for anyone who needs it:

    if(Browser.Engine.trident){
    var zIndexNumber = 1000;
    $$(‘div’).each(function(el,i){
    el.setStyle(‘z-index’,zIndexNumber);
    zIndexNumber -= 10;
    });
    };

  12. Roger, on March 10th, 2009 at 5:19 pm

    Super helpful! Been struggling with this for days!

  13. Dirk Kelly, on March 11th, 2009 at 7:09 pm

    Thanks Vance :-)

  14. Michal, on March 19th, 2009 at 6:51 am

    So simple. So awesome.

  15. Claudio, on March 31st, 2009 at 4:24 pm

    thanks men worked perfectly

  16. max, on April 1st, 2009 at 7:30 am

    This script saved me from the verge of mental breakdown.

  17. sylk, on April 10th, 2009 at 9:56 am

    Well, thank you VERY much.I agree with the previous comments, you saved a billions of neurons in our brains. I used some jquery tabs with superfish, set the styles for ff and every kind of normal browsers, but ie7 just made me crazy, i wanted to kill someone .I had to use li instead of div at the selector part, but it works fantastic now.

  18. bhanu, on April 11th, 2009 at 3:28 am

    Hi,

    Just amazing Thank you very very… much.

    Thakns,
    Bhanu.

  19. Have my babies, on April 20th, 2009 at 12:00 pm

    I LOVE YOU FOR THIS.

    I was about to rip my hair out. thank you.

  20. Renato, on April 26th, 2009 at 11:41 pm

    Hey dude, i’ve kissed your photo when i saw that this lines of code worked for me! i’ve wasted more than 10 hours trying to solve my problem! Thanks!
    ps: i’m not gay! (hehe)

  21. Matt Wood, on April 29th, 2009 at 4:26 pm

    Wow. This problem has been making me mad the past few days. Thank you for your easy fix!

  22. andy, on April 30th, 2009 at 9:06 pm

    thanks for this post! just amazing…

  23. Don Gilbert, on May 1st, 2009 at 5:30 am

    Where do I insert this code into the jQuery.js? I initially put it right in at the top, but it has not worked for me yet.

    Thanks.

  24. Chris Trygstad, on May 5th, 2009 at 3:47 pm

    Talk about saving me some serious grief with a simple and elegant solution! Thank you thank you.

  25. emily, on May 11th, 2009 at 5:48 am

    This was a GREAT solution. After struggling with getting a simple drop menu in the header to show about the content, and trying every css fix under the sun, this worked!

    One thing to note, z-index can sometimes effect the ‘clickability’ (is that a word? not according to spell check!) of an area of a page. So you could very easily apply this to a page and discover that some of your links and form elements are unusable. I ran into this problem myself.

    Just to give an example for anyone still reading – I’m working on a three column layout with a header and footer. I have a css/js dropdown in the header. The submenus overlap the center column. But in IE 7 they underlapped it. When I applied this fix, the menus worked perfectly, but my whole center column became unclickable. The fix to THAT was very easy. I simply restricted the script to header divs. So in my case my code looked like .
    So I changed the script to apply to divs in header thus $(div).each( … ) -> $(#header div).each( … )

    Thanks so much!

  26. Wholesale Clothing Suppliers, on May 14th, 2009 at 1:45 pm

    Thanks for the quick fix. I struggled with this for days initially without any success. I wish I’d gotten to this site earlier and my z-index headache could have been fixed much earlier.

    Anyway, your code can always be reserve for my future use when I’ve a new site. The theme developer had advised me to add in certain z-index value to my style.css file and it worked.

  27. matt mcinvale, on May 18th, 2009 at 11:26 am

    thanks, this sorted out my superfish issues on ie7 perfectly. :)

  28. darrell, on May 21st, 2009 at 3:43 pm

    This DOES work. I can verify in viewing generated source in Firefox that all my div’s are getting the z-indexing applied. I have jQuery Megamenus that are showing up underneath my Cycle plugin. The indexing is correct, I also used $(”.megamenuitem”).css(”z-index”,”2000″); to make my menu higher than the Cycle z-indexing. This all gets applied in code but makes no difference in IE7. :(

  29. darrell, on May 22nd, 2009 at 10:49 am

    No worries I fixed my problem! The top portion of my site that has the menu was a table (not by choice, the CMS) the rest of my page that has the cycle was custom divs. I gave that table a high z-index well above anything else, and I don’t need the jquery fix anymore for IE7…. for now.

  30. Meagan Fisher, on June 5th, 2009 at 11:04 am

    I want to kiss your face right now. Thank you thank you thank you.

  31. Saulo Padilha, on June 16th, 2009 at 2:24 am

    Wow! Many thanks !!! At first i thought that that would not help me, but i’ve change to “$(‘li’)” and it save my day.

    thank you a lot !

  32. Musaffar Patel, on June 16th, 2009 at 10:16 am

    Well, this really was a great and quick solution to a problem I was fearing of tackling in all sorts of other unimaginable ways and it turns out just a few lines of code does the trick. It’s a snippet of code I’ll be reusing throughout many projecfts I’m sure!

    Thanks!

  33. Sole Position, on June 20th, 2009 at 4:52 am

    Thank you so much for solving this stacking problem – it rattled my brain for so long – I use a MAC and hate dealing with IE – but its all part of the game.

    Again – thanks.

  34. Greg, on June 21st, 2009 at 12:28 pm

    Thanks Vance – this has solved my drop-down menu not showing over a group of fading images – brilliant!

    BTW, I’m using WordPress, so to get your jQuery code to work I had to change all instances of ‘$(‘ with ‘jQuery(‘ (this is because WP also uses Prototype so you must specify jQuery explicitly or it won’t work!)

  35. utpal halder, on June 22nd, 2009 at 2:23 am

    Thanks a million.

  36. Me, on June 25th, 2009 at 8:12 am

    Thanks, Nice job man…

  37. Lalor McMahon, on June 30th, 2009 at 12:23 am

    Absolute saviour – thanks a plenty for this!

  38. Thanos, on June 30th, 2009 at 6:42 am

    Hi, can where should I place this function and how to call it? Thanks

  39. Adrian, on July 10th, 2009 at 3:42 am

    Absolutely Great :) I love you…

  40. BR, on July 29th, 2009 at 6:09 am

    Mait, you saved me from visiting psycho-ward… ***** bloody IE. Sometimes i wonder… does microsoft produce their crappy browser just to drive normal people mad or what *?

  41. AH, on August 7th, 2009 at 7:18 pm

    Thank you. Just, THANK YOU!!

  42. emptywalls, on August 12th, 2009 at 6:49 pm

    holy crap! it works in ie6 too! i changed ‘div’ to ‘*’ just to get it working (im dealing with ul and div) and now i can leave work knowing that i have a fix to work with. ill work out the details later so im not applying it to everything…

    thank you so much!

  43. Gabs, on August 19th, 2009 at 3:51 am

    One solution to make your dropdownmenu work with -elements and <a>-elements in IE7 (so that the /-elements is rendered beneith the dropdownmenu yet still clickable) is to remove ALL position:relative, position:static and position:absolute and ALL z-index in all your and/or other elements EXCEPT your dropdownmenu.

  44. Björn, on August 20th, 2009 at 7:04 am

    Oh! Your the verry best!!! Tnx for this great post.

    Life smiles once again!

  45. Ben, on August 26th, 2009 at 3:07 pm

    Horray! Thank you for the jquery code! Fastest fix for an annoying IE bug ever.

  46. FiL, on September 11th, 2009 at 10:18 am

    This isn’t necessary at all, though it does work in some cases.

    For IE, you just need to make sure the parents of each element have the proper z-index. Putting the z-index only on the item itself will do no good in IE.

    However, if you put a z-index on the parent of the jquery element that is lower than the z-index of the parent element of the element that you would like above the jquery. It works just fine, and you don’t have to wait for the page to load for the fix to occur.

    I tried this fix, noticed it didn’t fix anything until the page fully loaded (but it did in fact fix it), then I removed this and fixed it myself with 2 lines of CSS.

    Please stop using javascript to fix problems that CSS, and a general understanding of how elements are rendered in a browser, can fix.

  47. Mike S., on September 18th, 2009 at 1:03 pm

    This fix worked like a charm! Thank you so much!

  48. Truly Great!, on September 23rd, 2009 at 11:49 am

    Thank youuuuuuuuuu !!!
    Saved a lot of headaches mate. Thanks again :D

  49. Diana C, on September 25th, 2009 at 6:02 pm

    This solution totally worked for us, after trying just about everything else (even the parent z-index solution did not work for us)… Thanks!! We also made it custom for us by using a different selector, upping the starting z-index to 10000, and setting specific elements on the page to even higher values.

  50. Bob, on September 26th, 2009 at 9:20 pm

    THANKS!!! YOU SAVE MY DAY!!
    GREAT JOB!!!
    CREDITS TO YOU Vance

  51. Johan K, on October 1st, 2009 at 6:59 am

    Guess this sollution works for most people.
    But for me z-index in Firefox and IE8 started to behave just like IE6 and I7.

    So it just made it worse…

  52. Johan K, on October 1st, 2009 at 8:00 am

    After two hours I solved it.

    What I did was to to exclude one <li from the loop that had two classes. This was the li the contained the active menu items.

    I wanted this <li and all it´s children to have a higher z-index than other <li no matter what.

  53. Viktor, on October 5th, 2009 at 4:40 am

    Thanx a lot

  54. Jorge Pedret, on October 6th, 2009 at 9:03 pm

    Amazing! I’ve never seen a fix like this! I just copied and pasted it and it worked hahaha. It’s kind of scary but I verified in IE7 and everything else is working fine.

    Thanks a lot!

  55. Eros Fratini, on October 12th, 2009 at 8:02 am

    I really love you, man

  56. Dan A, on October 16th, 2009 at 4:05 am

    Thanks for this fix; you just saved me a lot of time and effort!

  57. Ben Senior, on October 22nd, 2009 at 7:05 am

    Wow it worked! \o/ genius

  58. Lance Leighnor, on October 27th, 2009 at 5:53 pm

    Me too. I’ve been scratching my head over this silly menu and a jquery display and it was IE7 all along.

    Thank you!

    Lance

  59. Thiago Felipe Festa, on October 29th, 2009 at 7:24 am

    Thanks guy!
    You solved my problem with my menu!

  60. DRScales, on November 3rd, 2009 at 9:19 am

    Awesome fix thanks

  61. Nirok, on November 3rd, 2009 at 5:17 pm

    Hey works well but I did struggle to get it working until i scrolled down and read to replace the “div” with “*”

    Is it worth putting that at the top???

  62. Enrique Robledo, on November 18th, 2009 at 9:45 pm

    THANK YOU VERY MUCH!! I work hours making a layout and implment Superfish and Jquery, but, when open the site in IE, Fuc..#@#$@#!!! And lather I was encountred this post! Great!!

  63. Amandine, on November 19th, 2009 at 2:39 pm

    I want to yell Yihaaaaaaaaaaaaaaaaaa !!!
    After all those hours trying, your code is like magic and save me so much time ! I can’t believe it but yes it’s solved ! thank you so much !!

  64. Vance Lucas, on November 20th, 2009 at 11:47 am

    Thanks everyone for posting some great comments, praises and suggestions. I am glad it was helpful! :)

  65. Dan, on November 25th, 2009 at 8:39 pm

    You, sir, are a savior. I had a CSS dropdown menu combined with a jquery box replacement and the box items kept showing up behind the CSS dropdown menus even with z-index declared. Your code rescued me from the abyss of eternal dread. Thank you and season’s greetings!

  66. John Knotts, on November 29th, 2009 at 11:15 am

    Much thanks!

  67. Praveen Rajan, on December 2nd, 2009 at 4:27 am

    Thanks alot buddy….. :)

  68. Aldomatic, on December 11th, 2009 at 11:09 am

    This just saved me some time! thx!

  69. Dennis Dewey, on December 15th, 2009 at 8:42 am

    Yeah, luckily this was the FIRST thing I went to from the Google search so I did not spend much time on this problem after trying for about ten minutes to modify the css. The query I used was “jquery z-index ie7″.

    Thanks Vance. I don’t normally get my problems solved this quickly so I was pleasantly surprised.

  70. Mike, on December 18th, 2009 at 5:37 am

    After wrestling with this issue for 2 hours, I finally stumbled upon your post and fixed my post. I can now go to bed a happy man.

    Thank you gentlest of princes.

  71. Bob, on December 21st, 2009 at 5:28 pm

    This is wonderful, thank you!

  72. rookie07, on December 30th, 2009 at 9:54 am

    hey,

    just wanted to send you a big cheers, you saved my day (or days)!!!

    d(ô.ô)b

« »

All content copyright © 2013 Vance Lucas | Powered by WordPress | Entries (RSS) | Comments (RSS)