The Myriad Blog

Our Online Journal


Fixing the IE7 Z-Index Bug

| Posted by Peter Schultheiss on February 24th, 2009 at 09:15 am

Dynamic drop down menus have always been a headache for web developers, mostly due to quirky rendering behavior across different browsers. IE7 presents a unique challenge with the way it renders z-index stacking orders.

Even though I had all of my z-index values correct, drop down menus were being placed underneath a relatively positioned <div> that occured further down the page.

There is a very elegant solution to this problem that requires jQuery and a few lines of javascript code at the bottom of the page. The following code traverses through your <div> tags assigning the ones at the top of the page a higher value. Worked like a charm for me!

jQuery(function() {
    var intIndex = 1000;
    jQuery('div').each(function() {
        jQuery(this).css('zIndex', intIndex); intIndex -= 10;

Special thanks to Vance Lucas for posting this function on his blog.

Recent Projects
Our Services
Follow Us