 |
 |
 |
|
10.28.09 Correcting Z-index Stacking Issues Within Internet Explorer  By Dustin BrewerHaving trouble with elements (divs, tables, ul, lists, etc) stacking incorrectly in only IE6 and IE7? Your issue is relatively (pardon the pun) easy to fix without going too far out of your way to fix the issue. This issue has been around for awhile but I feel it is something that should definitely be out there, despite the fact we are talking about going back 8 years (nearly 9) with IE6. They even carried the z-index issue over to IE7. Fortunately the CSS issue is now fixed in IE8 (in standards mode) so we don't have to worry about fixing it for the newest version of Internet Explorer. Understanding why Internet Explorer renders z-index incorrectly The way it works, Internet Explorer starts at 0 and renders each element that comes after the first element at a higher z-index. Which isn't really a problem unless you have a navigation dropdown that needs to go on top of the content below it. What will happen is your navigation dropdown will go underneath the content below it, effectively hiding some or all of your navigation list. I ran into this issue recently with the CSS navigation Suckerfish dropdown, which reminded me I should post something about IE's zindex problem. Fixing IE7 / IE6 z-index stacking bug The easiest way to fix the Internet Explorer z-index stacking bug is to simply assign the parent element, typically a div, first with position: relative which allows a z-index to be set to the element, then assign a high z-index to that element. What will do is tell Internet Explorer that it should start numbering the elements within that element at whatever number you have set. Effectively resetting the z-index stacking within that element to a higher z-index. Forcing IE to render z-index correctly with JavaScript There are times when it isn't very easy to simply add the relative positioning to the parent element, for instance when you are working with Widgets that may need complex and dynamic z-index assigned to ensure that they stack properly throughout your web app, you need to take matter into your own hands. The script below will allow you to dynamically force a div container and all subsequent elements with the same class to get progressively higher z-index in Internet Explorer. You need jQuery to make this snippet, created by Richa Avasthi work.  With both of these techniques in your arsenal you should be able to fix your website's Internet Explorer stacking issue easily whether it be a simple CSS dropdown or a more complex web application. Let me know if you have found other ways to resolve this issue other than the two I have mentioned. Comments About the Author: Dustin Brewer is a web designer located in Oklahoma City, OK specializing in aesthetics in design, web standards, accessibility and usability. He also enjoys helping others to discover CSS and web design best practices through his web site, dustin brewer, a web design news site. |
||||||||
|
| ||
-- TheDevWeb is an iEntry, Inc. publication -- |
