Conditional CSS required to workaround an IE bug

W3C CSS Validator

I sometimes wonder if working on our holiday home website is going to be a job for life?

In March I wrote about fixing several HTML incompatibility problems that meant that the website wasn't properly HTML 4.01 compliant (as measured by the W3C HTML validator); then in April I separately wrote about what seemed to be a simple request to create a bulletted list of features ended up with discovering an obscure Internet Explorer display bug, well a month later, I've found yet another problem.

The problem is this:

To get the bulletted list to appear properly in Internet Explorer I ended up having to add a zoom: 1; declaration to the CSS style for the bulletted list, vis:

ul.feat li {
    display : inline;
    padding : 0 1.3em;
    background : url (/theme/tick.gif) no-repeat;
    zoom : 1;
}

But unfortunately then when I used the W3C CSS validator to confirm that the CSS style sheet is CSS 2.1 compliant, the same 'zoom: 1' line gets rejected as it's not valid CSS.

So how to fix? What I ideally wanted to do was to keep the style sheet as standard (compliant) CSS (so big tick from W3C), but then for anybody accessing the site with Internet Explorer include the necessary additional CSS command to ensure that everything displays properly.

Fortunately there is a reasonably easy way to accomplish this with IE CSS Conditional comments. These are additional HTML commands that all browsers other than IE just ignore (as they think they are HTML comments), but that IE will process - i.e. you get specific HTML commands that you can target at Internet Explorer users only.

So what you do is to define an additional CSS file that contains your "non-standard" CSS commands for IE users and then with a conditional comment direct just your IE users towards using this additional CSS file:

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

This example means that any Internet Explorer 6 users will process just the additional CSS file and there are similar conditional comment options if you want to target specific CSS at IE5, IE7, all IE users or specific ranges of IE versions. Examples of the different options and how they all work are over on Dave Woods' blog.

For me I determined after testing with different versions of IE that I actually needed to target the 'iefixes.css' file at all IE users so I used a <!--[if IE]> conditional format in the head of the single affected page and now everything validates OK.