As you know, there is a problem with z-index tag on IE6 and IE7 for flyout menus.. One way to fix many of the issues with IE7 is to dynamically reverse the default z-index stacking order of the elements on your 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. If you’re using jQuery (the best Javascript library there is), here’s the quick fix:
1 2 3 4 5 6 7 | $(function() { var zIndexNumber = 1000; $('div').each(function() { $(this).css('zIndex', zIndexNumber); zIndexNumber -= 10; }); }); |
This code will start with a z-index of 1000, and decrement the z-index for each DIV element of the page by 10, giving the first DIV a z-index of 1000, the second, 990, the third 980, and so on. Notice that the selector will find all DIV elements with the code “$(‘div’)”, using the same syntax as CSS selectors. If your HTML code has different requirements, feel free to change the code or the selector to suit your needs by following jQuery’s documentation on selectors.
If you want see the results, here is the example image!
Before apply the fix:
And here is the result after apply the fix:
flayzeraynx is Photographer, CSS master and UI Developer at cyqlr.com an established Web Development company in Cleveland, OH. He spends his days hand crafting CSS and Javascript. Ozan spends his spare time with his wife and son.
This entry was posted on Monday, January 4th, 2010 at 11:25 am and is filed under Computer World, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
