Using CSS with Internet Explorer

We've all been there. Firefox loves it, Opera can't get enough of it, even Safari seems keen on it, but Internet Explorer doesn't want to know.

Here are some useful tips/hacks on how to write CSS rules so that only Internet Explorer can read them (and other browsers will ignore)

Conditional Comments
A conditional comment can be added to the head of your page that only IE will read. It should be put into the HTML like this:

{!--[if condition]}
(HTML to use if condition is true)
{![endif]--}

To use this in a working example it could look like the following:

{!--[if IE 5]}
{p}This message is only displayed in IE5.{/p}
{![endif]--}

In all examples replace } with > and { with < for the HTML to work.

Hacks
You can also write hacks into your stylesheet that only IE will read by using *html. A working example would be

* html body {
write your changes in here;
}

It can also work with id (#) and class (.) selectors by the following:

* html #idSelector {
write your changes in here;
}

* html .classSelector {
write your changes in here;
}

So although Microsoft may think they've got us by the short and curlys, there's plenty out there to get round them!