Fixing IE7 z-index issue using simple jQuery Solution

For web developers, achieving cross browser compatibility is an headache, especially when it comes to Internet Explorer 6, and Internet Explorer 7.

While there are many bugs IE 6 is having, there are various fixes available to fix them. I’ll go through some of them in future, and explain you how to fix them.

For the time being, lets look at Internet Explorer 7 funky bugs which drives web developers like me crazy. While most of the known bugs occur in relatively obscure situations and go unnoticed, there are few bugs, that are really stick out and cause web developers to waste many hours to fix them. It is because of the IE7 bug which causes the browser to render z-index in unpredictable orders. This causes multi-level navigation menu to render unpredictable, and disturbs your other html elements.

One way to fix many of this issues with IE7 is to dynamically reverse the default z-index stacking order of the elements on 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. Here’s the quick fix using on the best Javascript library- jQuery.

<!--[if IE 7]>
<script type="text/javascript">
$(function() {
var zIndexNumber = 500;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 5;
});
});    
</script>
<![endif]-->

Explaination of the Code:

If IE 7, is the conditional tag, which asks browsers to run this javascript code only in case of the IE7.

This code will start with a z-index of 500, and decrement the z-index for each DIV element of the page by 5, giving the first DIV a z-index of 500, the second, 595, the third 590, and so on. Note that the selector will find all DIV elements with the code $(‘div’). If you have different requirements, feel free to change the code or the selector to suit your needs by following jQuery’s documentation on selectors.

I found this cool website where I read that ie7 does something weird with the stack order when it renders the page and solves the problem using jQuery. Surprisingly I just copied and pasted the code (after analyzing it of course) and it fixed my problem! I just changed code to start z-indexing from 500 instead of 1000, because of the z-index I’ve been using for other element.

Update:

This may not work correctly on Xhtml document without Doctype Specification. Learn more about Doctype Specification. Moreover, its also important to Validate your markup for correctly using this trick.

Related Posts

22 COMMENTS

  1. Piyush
    December 28, 2010 12:18

    Thanks for the help guys.. it really worked 🙂

  2. January 02, 2011 01:54

    I’m getting a javascript error, is anyone else?

    • January 03, 2011 11:10

      @landscape: what error are you getting?

  3. clark
    January 08, 2011 12:14

    it helped… t.y

    great for the starters..

  4. StarJerk
    January 12, 2011 23:47

    Im happy U did it. Thanks for writing so informative post. Im lookin’ forward to c and read ur next post. Cheers

  5. amit
    January 13, 2011 08:52

    Your right Clark.
    its really gud for starters

  6. Giuseppe Barrett
    January 13, 2011 15:13

    Great article. Waiting for more.

  7. Jenoffa
    January 14, 2011 05:20

    I found here something new and interesting. Thanks

  8. January 16, 2011 09:21

    Thank you clark and Amit for your comments.

    Glad to see that it helps you.

  9. Dionisio
    February 01, 2011 16:48

    Why don’t you guys try to use a Doctype especification?

    I had these problems today, and it all solved when I specificated a Doctype.

    BTW, i used xHTML Transitional Doctype, like this:

  10. February 02, 2011 10:48

    @ Dionisio, thank you for your comments on this. We’ve updated article so that other visitors can find this information.

    Regards
    Krunal

  11. M Gothar
    February 10, 2011 05:00

    Thank you so much, I’ve been searching this since last 2 days.

  12. Mike
    February 15, 2011 18:04

    I’m trying to fix my drop downs in ie7. It’s a wordpress site, I want to try this fix but I’m not sure how and where to add the code.

    • February 15, 2011 18:09

      Hi Mike,

      You can add this code in the footer. Make sure you load jQuery before this code. Other wise it will cause error. If you’re still unable to fix it, please a share a link, I’ll be happy to guide you.

      Thank you
      Krunal

  13. Reny J
    June 05, 2011 19:46

    Appreciate it for all your efforts that you have put in this. very interesting info .

  14. Adel
    June 16, 2011 10:11

    I found it interesting. It solved my problem. Thanks a lot

  15. Surviving
    February 15, 2013 02:30

    You will be an ocean of expertise, otherwise how is it achievable to write and express your opinion on just about every topic so effortlessly. Bow ahead of you!

  16. Read This
    April 09, 2013 09:30

    Do you create these posts yourself, or do you outsource them?
    They are rather outstanding and I’d personally like to see some of your other work. Do you own any other blogs or sites that I could visit?

  17. ringworm treatment
    May 06, 2013 16:12

    This article is in fact a fastidious one it helps new the web viewers, who are wishing in favor of blogging.

  18. Jinesh Gopinathan
    May 09, 2013 11:01

    Solved my issue. But can’t understand why the hell clients insist on supporting IE7?

    • May 09, 2013 12:00

      Glad to know that it helped you. 🙂

      You can explain your client with Browser usage statistics, and if their target market use IE7 then you can support it at additional cost. Normally, most client agree with you once you offer actual browser usage statistics.