Jayesh Patel
Filed under - CSS, Design, HTML5 & CSS3, Web Designer Help
No Comments so far. Add yours now

How To Create an IE-Only Stylesheet



This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.

If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with IE. 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 the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Why use conditional stylesheets?

  • You got problems, they need fixin’
  • Keeps your code hack-free and valid
  • Keeps your main stylesheet clean
  • Perfectly acceptable technique, sanctioned by Microsoft

And remember, these conditional tags don’t have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.


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

Target everything EXCEPT IE

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

Target IE 7 ONLY

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

Target IE 6 ONLY

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

Target IE 5 ONLY

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

Target IE 5.5 ONLY

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

Target IE 6 and LOWER

<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> <![endif]-->
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> <![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]-->
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> <![endif]-->
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> <![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]> <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> <![endif]-->
<!--[if gte IE 6]> <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> <![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]-->
<!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> <![endif]-->
<!--[if gte IE 8]> <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> <![endif]-->

Universal IE 6 CSS

Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to server IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.

<!--[if !IE 6]><!--> <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" /> <!--<![endif]--> <!--[if gte IE 7]> <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" /> <![endif]-->


If you must…


* html #div { height: 300px; }


*+html #div { height: 300px; }


#div { height: 300px\0/; }

IE-7 & IE-8

#div { height: 300px\9; }


#div { _height: 300px; }

Hide from IE 6 and LOWER:

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

Argument against conditional stylesheets

We shouldn’t need them. They are against the spirit of web standards.

Argument for conditional stylesheets

Yeah, but we do need them.

Leave your comment

You must be logged in to post a comment.

Share IT © 2018. All rights reserved.