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]-->
Awesome ! Didn’t knew this was even possible !
I can actually create a css file for non-IE browsers.
Thanks !
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 !
Chris, is there a more concise way to do this? I do not want to repeat all my non-IE6
<link>
style tags.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.
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
Fantastic!
Exactly how the web should look in IE6.
You can just change it so all users will get the default stylesheet, but IE users get their own stylesheets to override it:
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?
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:
How about combining the first two link elements like this:
<!--
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]-->
what a rubbish!
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!
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…
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.