Ruslan Ulanov’s Codeshack

The developer’s notebook

Fixing IE6/IE7 style issues

one comment

Check out Cascading Style Sheet Compatibility in Internet Explorer 7 article at MSDN.

It explains how to address IE7 compatibility issues in CSS.
In short, there were several bugs in CSS parser of IE6. Some CSS constructs (filters) that were applied by IE6 are ignored by IE7 and above – like “* html”. We could take advantage of these broken filters to create IE6-specific rules.

For example, first define a style that will look fine in IE7:

#box { top: 2px; }

then (below that rule in CSS file) use CSS filter “* html” to override it with IE6 style:

* html #box { top: 4px; }

This second rule will be ignored by IE7 and above, but will fix the problematic style in IE6.

There’s another approach to fixing IE6/IE7 issues – it’s conditional comments.

Consider the following code that should be placed in the HEAD section of HTML:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->

The <!–[if IE 6]> and <![endif]–> tags are used to filter out content that will be parsed by IE6 browser only, any other browser will ignore anything that’s inside these tags.

For more info see About Conditional Comments on MSDN or more user-friendlier explanation at  Quirksmode.

Written by Ruslan Ulanov

May 27th, 2008 at 7:40 pm

Posted in CSS,HTML

Tagged with