Internet Explorer 6 isn’t going to go away. We wish it would, and so does Microsoft – but it won’t. And when it does, it’s big brother IE7 will be there to frustrate programmers for years to come.
Until all that happens, we need to be able to feed a web page different HTML depending upon the browser being used.
Previously, we’ve used Conditional Comments to make this happen, but that’s a lot of work when all you need to do is change a single margin or two, so here are a few one-character tricks that will present IE6 and/or 7 with the values they’d prefer to see.
height:300px; /* all browsers see this */
height/*/**/:350px\9; /* All IE only, not Firefox/Opera/Chrome etc */
.height:400px; /* IE 6-7 only (note the leading period) */
_height:450px; /* IE 6 only */
Any CSS attribute can be used instead of height; just remember a period before the attribute to present it to IE 6-7, and an underscore to present that attribute value to IE6 only.
As with all CSS, the last value takes priority; so
_color: red;
color: blue;
Will present the color blue in all browsers – the IE6 override for the color red will be overridden by the general setting for the color blue. In this case,
color: blue;
_color: red;
will give the correct values.
A word on validation; if you put this CSS file through the W3C validator, it will fail. There are very few business cases for having completely valid CSS, but if you do have one, this method may not be the best for you; you should use Conditional Stylesheets instead.