How To: Create an IE Specific Stylesheet

ie-logoIf you are a web developer you know how painful is to write a webpage that behaves same in all the web browsers. Generally the webpage created for Firefox behaves pretty much the same in Chrome, but Internet Explorer has its own problems. Whether it be problem with Multiple Selection in IE or the AJAX Cache Problem, Internet Explorer has always been a browser which needs special attention.

Thus, generally how we deal with IE is we create a separate stylesheet altogether and include it in the webpage whenever the client is using Internet Explorer.

IE Only

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

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

Non-IE Only

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 include stylesheet for 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

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->
Get our Articles via Email. Enter your email address.

You may also like...

7 Comments

  1. Alex says:

    I preffer using cssbrowserselector js library solution: http://rafael.adm.br/css_browser_selector/
    CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.
    I find this solution easier then conditional importing the css files.

  2. Brad says:

    This is also called a conditional comment:
    http://www.fettesps.com/conditional-comments/

  3. shan says:

    Hi viral
    Nice blog
    i have a question
    i used

    i dont have “IE-6-SPECIFIC.css physically.Where is that css?

    With the same code above ,it doesnot work for IE.Why is it so
    also i tried with

    on ie 8 &9 .It doesn’t work as well.
    On clicking Sports menu…sub menu does not open instead language menu goes down..
    on clicking sports again technology menu comes up again.
    i’m clueless.
    Plz help me in getting it right..
    Thanx

  4. chinatan says:

    my website is totally animated with java script but not runs in internet explorer…
    should you please help to solve them.

  5. Ashish says:

    I have made 2 page one is a.html and another one is b.css,
    In a.html i have put this code

    aaaa

    and in b.css
    .box {

    background: gray; /* standard */

    background: pink\9; /* IE 8 and below */

    *background: green; /* IE 7 and below */

    _background: blue; /* IE 6 */

    }

    not working in any version of IE
    plz suggest me what mistake i m doing

  6. subbareddy says:

    Thanks Viral for giving thi valuable Information About IE 8.

  7. santosh says:

    Good Working Css Style

Leave a Reply

Your email address will not be published. Required fields are marked *