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.
Thanks for the help guys.. it really worked
I’m getting a javascript error, is anyone else?
@landscape: what error are you getting?
it helped… t.y
great for the starters..
Im happy U did it. Thanks for writing so informative post. Im lookin’ forward to c and read ur next post. Cheers
Your right Clark.
its really gud for starters
Great article. Waiting for more.
I found here something new and interesting. Thanks
Thank you clark and Amit for your comments.
Glad to see that it helps you.
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:
@ Dionisio, thank you for your comments on this. We’ve updated article so that other visitors can find this information.
Regards
Krunal
Fixing IE7 z-index issue using simple jQuery Solution…
Fix Internet Explorer 7 funky bug which causes funky z-index order. 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. We tried to achieve that using jQuery….
Thank you so much, I’ve been searching this since last 2 days.
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.
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
Appreciate it for all your efforts that you have put in this. very interesting info .
I found it interesting. It solved my problem. Thanks a lot