A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » HTML » Serving Up Universal IE 6 Stylesheet Submit one!

Serving Up Universal IE 6 Stylesheet

All good browsers plus IE 7 and up get REGULAR-STYLESHEET.css, browers IE 6 and below get a special stylesheet with stripped down basic-but-still-nice styling.

<!--[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]-->

Reference URL

Subscribe to The Thread

  1. TeMc says:

    Awesome ! Didn’t knew this was even possible !

    I can actually create a css file for non-IE browsers.

    Thanks !

  2. JC says:

    Thank you so much for this, I’ve been trying to achieve something like this for the past 4 hours. !!
    You made my day :))

    Cheers !

  3. Alan says:

    Chris, is there a more concise way to do this? I do not want to repeat all my non-IE6 <link> style tags.

  4. Alan Hogan says:

    Yeah, this is wrong, actually. IE7 and above will read the first LINK tag just fine, and they will read the second one, too. Non-IE browsers will just read the first LINK tag.

    If you look at Malarky’s code again, you’ll see I’m right.

  5. Tai Travis says:

    Fantastic!

    Exactly how the web should look in IE6.

  6. Sh says:

    You can just change it so all users will get the default stylesheet, but IE users get their own stylesheets to override it:

    <link rel="stylesheet" type="text/css" media="screen, projection" href="style_default.css" />
    <!--[if gte IE 7]>
      <link rel="stylesheet" type="text/css" media="screen, projection" href="style_ie7.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" />
      <link rel="stylesheet" type="text/css" media="screen, projection" href="style_ie6.css" />
    <![endif]-->
  7. Francesco says:

    I’ve been using Andy Clarke’s wonderful IE6 stylesheet for a while now. But I noticed that it doesn’t seem to work when linked from googlecode.com. Only if I link it locally, it works. On the XP laptop I keep with IE6, at least.

    Anyone else found the same problem?

  8. Tom Fortmuller says:

    Chris, what about using downlevel-revealed conditional comments? (http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx#dlrevealed)

    Something like this should do the trick:

    <!-- This gets picked up by all good browsers, plus IE7 and up -->
    <![if gte IE 7]>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
    <![endif]>
    
    <!-- This one is for IE 6 and below -->
    <!--[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]-->
  9. How about combining the first two link elements like this:

    <!--

  10. How about combining the first two link elements like this:

    <!--[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]-->

  11. lata says:

    what a rubbish!

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---