Recently i was working on a site design that included a top, horizontal navigation, with jQuery based effects applied to elements below the top navigation. In IE8, Firefox and Safari, everything looked great. In IE 7 though, that frustrating IE7 quirks bug reared it’s ugly head once again. The drop down navigation appeared below the jQuery modified elements and whatever changes I made to the z-index didn’t do a thing.
I have used many different solutions to this problem in the past including the following articles:
http://shinokada.blogspot.com/2009/02/z-index-problem-with-ie.html
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://stackoverflow.com/questions/1257059/jquery-innerfade-not-appearing-correctly-in-ie-7-and-below
These articles attempt to tweak the z-index of the parent elements to work around IE 7′s known bug, but sometimes this won’t work.
The solution I have found to work best is from the following blog:
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
The code block provided in the blog post above works great most of the time, my issue with it is that is will apply it’s z-index reordering all of the time to all browsers. There are not too many people still using such an old browser, so I would rather that newer browsers use the code I created, and only modify the z-index for older browsers. I modified the proposed code fix slightly and am offering it up as a slight alternative.
<script type="text/javascript">
jQuery(document).ready(function() {
//fix ie 7 and less quirks issue
if (($.browser.msie) && (parseInt($.browser.version, 10) <= 7)) {
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
}
});
</script>The theory of this modification is that we only want to use this fix if the visitor is using a version of IE less than or equal to version 7, so really IE 7 and IE 6.5. You will need jQuery as well of coarse, in case you are trying to fix IE 7- z-index bug for other general layout issues not being caused by the use of jQuery. Plase this code block in the <head> section of your site.
