Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. TeMc
    Permalink to comment#

    Awesome ! Didn’t knew this was even possible !

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

    Thanks !

  2. JC
    Permalink to comment#

    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. Permalink to comment#

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

  4. 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. Fantastic!

    Exactly how the web should look in IE6.

  6. Permalink to comment#

    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
    Permalink to comment#

    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
    Permalink to comment#

    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
    Permalink to comment#

    what a rubbish!

  12. I have a dumb question. What would be the benefits of using it on my own server rather than on google code server?

    Thanks in advance!

    • coder
      Permalink to comment#

      Recently found a reason for this. If you move to https from http then any nonsecure resource (non https) may have issues in IE (scripts, images, etc.). I was getting a js file from google and sadly IE would only display the site properly when I clicked to display all nonsecure content. By having the file locally I avoided that sad mess.

      Also, by linking out to a script you are further exposing your site. What if that resource is hacked? Another good reason to have it locally.

      Note: IE should just go burn in some hell hole somewhere…

  13. Niks Patel

    Recently found a reason for this. If you move to https from http then any nonsecure resource (non https) may have issues in IE (scripts, images, etc.). I was getting a js file from google and sadly IE would only display the site properly when I clicked to display all nonsecure content. By having the file locally I avoided that sad mess.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".