Paul Annett

These notes are for me, but you may find them useful if you’re having problems making your CSS look perfect across multiple browsers. You may also need to install old versions of IE to help you test.

Please bear in mind these are simplified examples which could give you a quick fix without having to plough through the why’s and wherefore’s each time (though I do recommend gaining this knowledge at some point).

Below I summarise how to:

• hide CSS from all browsers except IE
• hide CSS from IE5.01/Win
• hide CSS from IE5.5/Win
• hide CSS from IE5.5/Mac
• hide CSS from IE6/Win
• hide CSS from Firefox

CSS rule, hide from all browsers except IE
(star html hack explained)
* html div {
width: 50px;
}

Some of the following hacks rely on the fact that IE has various problems interpretting CSS containing strings of comments (/* */) - this page about comment bugs may be useful.

CSS property, hide from IE5.01/Win
(explained on the simplified box model hack page)
width/**/:553px;

CSS property, hide from IE5.5/Win
(explained on the simplified box model hack page)
width:/**/553px;

CSS property, hide from IE5.x/Win
(Tan hack, also explained on the simplified box model hack page)
w\idth:553px;

Note: An escape backslash must not precede any of the first six alphabetical characters: a, b, c, d, e, f. Also, if Netscape 4 sees even one escape backslash anywhere in the CSS, it will discard the entire stylesheet. So it is vital that this hack (and its containing rule) be hidden from that browser:

CSS, hide from Firefox
Off the top of my head, I interpret this as “show CSS to IE only” which I know is not right, but it’s useful to know this… all browsers use the last attribute mentioned in the CSS unless there’s one specified above it as !important, in which case they use that. Except IE currently ignores !important so will still use the last value like this:
width:553px !important;
width:500px;

So the width in IE woud be 500px, and in everything else would be 553px.

CSS, hide from NN4
(Caio hack explained)
/*/*/.emptyrule{}
div {width:553px;}
/* */

I guess, (I’ve not seen it documented though I have tested it), that if you want to hide a CSS property from IE5.01 and IE5.5 but not have to worry about hiding that hack from NN4, that you could just combine those previous two hacks like so:
width/**/:/**/553px;