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.
Explaination of the Code:
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.
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.