IE Specific Stylesheets

Internet Explorer has it’s problems with CSS (OK, it’s pretty much awful) but if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without a ton of hacks and without having alternate stylesheets. But if you (or your client) really wants to get pixel-perfect results cross-browser, you may need to specify alternate stylesheets for different browsers, especially Internet Explorer.

Here is the basic technique for an IE-Only stylesheet:

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

The opposite technique, targeting only NON-IE browsers:

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

If you need to get down and dirty with specific versions of IE, here are a few examples.

IE 7 ONLY:

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

IE 6 ONLY:

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

IE 5 ONLY:

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

IE 5.5 ONLY:

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

VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy)

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

Why would you want to use these conditional stylesheets?

• It’s more future-proof than hacks. A new browser or a new version of a browser may come along one day that wrecks up interprets your hacks in a strange way and will mess up your styling. That’s no good! For example, there is a really effective min-height hack out there right now, but who is to say that will work forever? The solution here would be to declare a min-height like normal in your real stylesheet, then declare a height (the workaround) in an IE-6-and-Lower stylesheet.
• It keeps your CSS clean. And valid! If having CS code that passes W3C snuff is important to you, this is the way to go
• Expandability. If a new browser comes along that you want to also support, you can create a conditional statement and stylesheet for that and you are all set, instead of re-tweaking your existing stuff.

If you think it is overkill for you to have IE-Specific stylesheets, you can use hacks to make things happen. Again, I don’t really recommend this, but this is how it’s done.

IE-7 ONLY:

* html #div {
    height: 300px;
}

NON IE-7 ONLY:

#div {
   _height: 300px;
}

HIDE FROM IE 6 AND LOWER:

#div {
   height/**/: 300px;
}

HIDE FROM IE 6 AND LOWER: (another way)

html > body #div {
      height: 300px;
}