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]-->

Explanation 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 elements.