IE9 Compatibility Mode Introduces CSS Errors

Testing CSS styles for all versions of Internet Explorer is bad enough without IE’s compatibility mode getting into the act.

A client recently contacted me saying users couldn’t see the dropdown navigation (at the top of the page, because the links were displayed behind the logo and other elements of the header (just below the navigation).

This site was rigorously tested in all versions of IE and I never saw the error he described. Then, I tried the site in IE9 on Vista in compatibility mode.

What do you know. There it was.

Z-Index and Positioning Errors?

Internet Explorer, the older versions at least, didn’t honor css z-index directions so I’ve always been careful to put my elements in source order so I don’t have to worry about z-index issues.

Turns out in compatibility mode, all elements positioned “relative” seemed to gain a high z-index and IE honored it. Elements that in IE8 and IE7 were second, third or fourth in the page source, now seemed to have a higher z-index than my navigation, which is first in the page.

Needless to say, the resolution was re-writing the CSS and in some cases the HTML to ditch the need for relative positioning.

I suppose now I’ll have to test for errors in yet another browser – IE in Compatibility Mode.

View Comments

Leave a Reply