How To Create an IE-Only Stylesheet

By: Chris Coyier on September 24th, 2007 — Posted in: Quick Tip / Trick

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 specifiy 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="NOT-IE.css" />
<![endif]>

If you need to get down and dirty with specific versions of IE, here are a few examples.
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]-->

NON-IE BROWSERS ONLY: (If you just wanna snub IE all together)

<![if !IE]>
<link rel="stylesheet" type="text/css" href="REAL-STYLESHET.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 statment and stylesheet for that and you are all set, instead of re-tweaking your exisiting 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;
}

To me, the biggest problems with IE are:

Min-Height / Min-Width
Floats
Box Model (padding)

I am going to try and write up what exactly these problems are, their causes, and how to work around them soon.

Theoretically Related Articles:

Discussion Elsewhere

This blog has Internet Explorer 6 issues… again…! at iainclaridge.net — October 17, 2007
Rinato — January 11, 2008
Innovablog > Les derniers jours d’Internet Explorer 6. Un pas de plus vers les standards du web. — January 27, 2008
Стили CSS - Как подключить CSS для браузера Internet Explorer различных версий » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеро — March 22, 2008
Starry Night: Incredible 3D Background Effect with Parallax :: FULL clout — March 23, 2008
IE CSS Bugs That’ll Get You Every Time — May 4, 2008

Responses

1

While I agree that using hacks for IE is a dirty method, I would personally not agree that using the IE 6 and IE 7 selectors (*html, * etc) as I think they are useful and help you get your design closer to pixel perfect.

In regards to the min-height/ min width issue I personally use a hack (read about it hear) as it makes my life easier…
Pretty much the only other hack I will use would be for pngs for ie6 (also read how I used it hear)

Comment by Jermayn Parker — September 24, 2007 @ 8:51 pm
2

btw I would be interested in your tips on how to get around these problems without the hacks I mentioned above…

Comment by Jermayn Parker — September 24, 2007 @ 8:51 pm
3

What a great post. I already knew the technique and I even use it, but it’s well explained ! Grreat job !

Comment by Romz — September 24, 2007 @ 10:54 pm
4

Nice work Chris, keep ‘em coming.

Comment by Graham Bannister — September 25, 2007 @ 3:11 am
5

Hey Chris.. Find this article really useful.. Well done!

Comment by ROCKFUSE|blog — September 25, 2007 @ 8:59 am
6

WHERE I CAN FOUN THIS CSS NOT-IE.css, IE-6-SPECIFIC.css,IE-5-SPECIFIC.css AND ALL PLZ HELPPPPPPPPPPPPPPPPPPPPP

Comment by Crud — March 25, 2008 @ 6:43 am

The IE 6 and less code is incorrect. It should read

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

(If less than IE7)

david

Comment by david — May 8, 2008 @ 10:38 am

8

Thanks for that catch David, fixed.

Comment by Chris Coyier — May 8, 2008 @ 10:46 am
9

Personally I use <!--[if lte IE 6]–>, which means if it’s less than or equal to IE6.

Comment by koew — May 14, 2008 @ 7:58 am