PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » HTML » Serving Up Universal IE 6 Stylesheet

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

    Awesome ! Didn’t knew this was even possible !

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

    Thanks !

    Reply ↓
  2. JC

    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 !

    Reply ↓
  3. Alan

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

    Reply ↓
  4. Alan Hogan

    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.

    Reply ↓
  5. Alan Hogan

    I have posted some examples of proper conditional comments here:
    http://demo.pixelsandpages.com/css-tests/

    Direct links:
    - Showing styles to only IE6 or not IE6, concise “downlevel revealed” method
    - Showing styles to only IE6 or not IE6, verbose “Beautiful Web” method
    - Showing styles to only IE 7 & IE 8

    Reply ↓
  6. Tai Travis

    Fantastic!

    Exactly how the web should look in IE6.

    Reply ↓
  7. Sh

    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]-->
    Reply ↓
  8. Francesco

    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?

    Reply ↓
  9. Tom Fortmuller

    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]-->
    Reply ↓
  10. iv.draganov

    How about combining the first two link elements like this:

    <!--

    Reply ↓
  11. iv.draganov

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

    Reply ↓
  12. lata

    what a rubbish!

    Reply ↓

Speak, my friend

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 ~