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

Comments

  1. User Avatar
    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. User Avatar
    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. User Avatar
    Alan
    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. User Avatar
    Alan Hogan
    Permalink to comment#

    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. User Avatar
    Tai Travis

    Fantastic!

    Exactly how the web should look in IE6.

  6. User Avatar
    Sh
    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. User Avatar
    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. User Avatar
    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. User Avatar
    iv.draganov
    Permalink to comment#

    How about combining the first two link elements like this:

    <!--

  10. User Avatar
    iv.draganov
    Permalink to comment#

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

    what a rubbish!

  12. User Avatar
    Renato Alves
    Permalink to comment#

    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!

    • User Avatar
      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. User Avatar
    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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag