How To Create an IE-Only Stylesheet
* 9/24/2007 — 32 Comments *
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="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 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;
}Learn more about IE bugs and how to fix them.
Loading ...
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)
btw I would be interested in your tips on how to get around these problems without the hacks I mentioned above…
What a great post. I already knew the technique and I even use it, but it’s well explained ! Grreat job !
Nice work Chris, keep ‘em coming.
Hey Chris.. Find this article really useful.. Well done!
WHERE I CAN FOUN THIS CSS NOT-IE.css, IE-6-SPECIFIC.css,IE-5-SPECIFIC.css AND ALL PLZ HELPPPPPPPPPPPPPPPPPPPPP
The IE 6 and less code is incorrect. It should read
(If less than IE7)
david
Thanks for that catch David, fixed.
Personally I use
<!--[if lte IE 6]–>, which means if it’s less than or equal to IE6.where you say “IE-7 ONLY” is “IE-6 ONLY”
:-)
(continue)
* html #div {
height: 300px;
}
Hey thanks this is just what I needed! God I hate IE!
Hey Chris is it me or is your syntax a little off?
You said:
The only problem is that the ! means not, so your first statement is for everything but IE, not IE only. Also correct me if I am wrong but don’t you need to make real comments:
<!--[if IE]> <![endif]-->There were a couple of errors in there originally, I fixed them up I think.
You know micro-s did that on purpose. Now that bill jumped ship maybe they can get there act together. also pass word protect the registry micro-s! Nice work on Your sites Chris and i Love Portland O.
very useful post, thank you for instructing people on the best practices for css.
the underscore hack like [ _height: 300px; ] works with non IE-7. but one problem: [ _height: -300px; ] doesnt work
* html #div {
height: 300px;
}
For IE7 only?
Never used it – I go for
*:first-child+html "selector here" {
height: 300px;
}
And this is what I'd use for IE6:
* html "selector here" {
height: 300px;
}
Thanks for the post. I’m going mad with IE8! Is there a way to create a separate sheet with only the hacks, which would be opened and overwrite normal CSS if IE? Not having much luck :(
Thank you for the conditionals! Helped me out of a bind.
(It might just be me, but you might want to check this page in IE6. Each person’s tiny-image is covering up their name and part of their text.)