No more CSS styles for old browser users

no more worries about old browser users

[Nealreal]

So I built this site completely in CSS. It doesn't render well in ie5 or 6. Instead of working in hacks to make it work (or using tables), I'd rather have the site display without any styles at all.

Is there a way for - when visitors who view the site in ie6 or below - the site shows no styles (the site will be plain) and a top header message would appear saying, "Your IE browser is old, upgrade here to experience the full benefits of the Internet or Get Firefox". This would be a link to IE7 download or Firefox.

I recently read a post about making sites render well in old browsers. Pretty much it said, "screw the old browser users. They need to simply upgrade their browser, why should we as developers continue to stress to get things rendered well in old versions of IE". I tend to agree. Now I'm currently designing for IE7, Safari, Opera and Firefox.

Is this possible, some kind of script or something I can add?
Any help would be appreciated. My site looks very well without styles by the way.

[ratman7]

You can ignore IE5, but there are still many IE6 users (unfortunately). So, it is in your best interest to have your site display correctly in IE6. It probably won't take a lot of effort -- just run an alternate stylesheet with an "IF IE6" conditional statement.

[Nealreal]

That is not a answer to my question. I need to know if there is a script out there that can do this. if so, please send me the link.

[encyclo]

The suggestion of IE conditional comments is a valid answer. Something like this (untested):

<!--[if gt IE 6]><link rel="stylesheet" type="text/css" href="style.css"><![endif]-->
<![if !IE]><link rel="stylesheet" type="text/css" href="style.css"><![endif]>

[Nealreal]

@ Ratman - Sorry. Didn't understand your response. Is there a tested version for the above suggestion?

[rocknbil]

Full conditional documentation [msdn2.microsoft.com]

It's important to note that only IE sees these - many mistake [! IE] to be interpreted by other browsers. It is not.

They need to simply upgrade their browser, why should we as developers continue to stress to get things rendered well in old versions of IE

While I'm glad you found an article that validates your position, it is extremely bad practice to dictate to the end user that they should do anything at all to access your information. But conditionals should give you the tools you need to turn them away.

[Fotiman]

it is extremely bad practice to dictate to the end user that they should do anything at all to access your information.

I second this comment. (emphasis added is mine).

As of December 2007, IE6 still held the majority of market share (with regards to IE users). Shunning that majority is just silly in my opinion. Also, there are many corporations that don't permit their users to upgrade to IE7.

The example given above is not correct. While I disagree strongly with this approach, here is how you could serve a stylesheet to all non-IE browsers, and to IE greater than or equal to IE7:

<!--[if gte IE 7]>--> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<!--<![endif]--> 

Note, however, that Conditional Comments are only understood by IE5 and up, so an IE4 browser would still try to serve up style.css (I wouldn't worry about this case, though... IE4 has been off the radar since about September of 2002 and is not in use).

[edited by: Fotiman at 5:51 pm (utc) on Jan. 31, 2008]

[ratman7]

@ Ratman - Sorry. Didn't understand your response. Is there a tested version for the above suggestion?

No problem. Here is what I use:

<!--[if lte IE 6]>
<style type="text/css">
@import url(path_to_your_file.css);
</style>
<![endif]-->

As others have pointed out, you can use GT LT, etc...

[Nealreal]

Thanks for the help guys. Its just so frustrating sometimes with these browsers. The article really made me think. I knew all the time that I had to make it work for IE6 - everything renders perfectly in IE7 Firefox and all the others accept for IE6.

Perhaps the "Dean Edwards Weblog" (make IE6 act like IE7) javascript will work. I will try it again.

[swa66]

Conditional comments can hide things from IE

<!--[if IE gt 6]>-->
 <link rel="stylesheet" type="text/css" href="style.css" />
<!--<![endif]-->

and can show things only to IE:

<body>
 <!--[if IE lt 7]>
<h1>You seem to be using an old version of Internet Explorer, please <a href="http://www.windowsupdate.com/">upgrade</a> to IE7 or <a href="firefox">something else I can make money off</a></h1>
 <![endif]-->
...

Note the first is for standards compliant browsers a line of code surrounded by two comments. The second is all comments to regular browsers.

MSFT's explanation here:
[msdn2.microsoft.com...]
but note they use invalid html, hardly what you want to feed browsers. the examples above are valid html.

[swa66]

Oops somehow I managed to make a syntax error while taking it back from my tests to the post.

The lt and gt tests need to be in the style of:
<!--[if lt IE 7]> (I managed to switch lt and IE somehow.

[Nealreal]

I've decided to code the site and fix the errors so that it renders well in IE6. I did it and it worked! I also found a stand-alone version of IE6 for testing:

browsers[dot]evolt[dot]org[slash]?ie[slash]32bit[slash]standalone

[fside]

it is extremely bad practice to dictate to the end user that they should do anything at all to access your information.

If you use script to load in content, or to better organize the page into blocks which can be hidden or viewed, wouldn't it be bad practice NOT to tell the viewer that they might be missing something? I'm not say some base level page of headers and paragraphs shouldn't be painted. But if more information or functionality is added with script, shouldn't the viewer be told about it, using noscript? Though I don't do it, noscript tags can be repeatedly used throughout a page at various places.