I want to warn users of Internet Explorer 6 using my site, that IE6 has had serious compatibility issues with my site in the past. What is the best way to do this?
Ideally, I want to have a message appear (not a new window, but a message box, if possible) that warns IE6 users of the issues and reccommends they update to either IE7, Firefox 3 or Opera 9.5.
The best way to target IE is through the use of conditional comments. You can then add some specific HTML that will only display in Internet Explorer.
<!--[if IE 6]>
<h1>Please upgrade your browser!</h1>
<![endif]-->
More on the subject:
Ok, I'll make this easy. No popups! A statistical disaster. Here is a nice little that sits on top of the . I only really worry about IE 6 or earlier since its the biggest culprit when it comes to messign up my designs. Below is a conditional statement (the best way to go in my opinion).
Stick this in the head (put in whatever content you wish):
<!--[if lte IE 6]>
<div id="warning">
<h4 class="red">Your Browser Is Not Supported!</h4><br />
<p>Please upgrade to <a href='http://getfirefox.com'>FireFox</a>, <a href='http://www.opera.com/download/'>Opera</a>, <a href='http://www.apple.com/safari/'>Safari</a> or <a href='http://www.microsoft.com/windows/downloads/ie/getitnow.mspx'>Internet Explorer 7 or 8</a>. Thank You! <a href="#" onClick="document.getElementById('warning').style.display = 'none';"><b>Close Window</b></a></p>
</div>
<![endif]-->
Stick this in your external styling sheet. I would not use inline styling.
#warning {position:relative; top:0px; width:100%; height:40px; background-color:#fff; margin-top:0px; padding:4px; border-bottom:solid 4px #000066}
Style it however you want - go nuts! You can get very specific with javascript to detect any browser, so if ya know how, it can add greater specificity.
This will be a pretty little box that sits on top of your content and lets your users see that their browser sucks.
If you want to determine if it's anything other than support browsers, you might want to use jQuery's browser detection, something like:
<script type="text/javascript">
// check if browser is IE6 (when IE) or not FF6 (when FF)
if (($.browser.msie && $.browser.version.substr(0,1) == '6')
|| ($.browser.mozilla && $.browser.version.substr(0,1) != '3')) {
$('#browserWarning').show();
}
</script>
Update: As different said, a much better option is to use the IE if statements, such as:
<style type="text/css">
/* this would probably be in a CSS file */
#browserWarning { display:none; }
</style>
<!--[if IE 6]>
<style type="text/css">
#browserWarning { display:; }
</style>
<![endif]-->
This option is much better because it doesn't require the browser version to "perfect". This won't work though, if you want to detect other browsers as they don't support the if statements. Then you may want to use jQuery to detect the browser, although I would recommend trying to avoid it as much as much as possible.
Conditional comments provide a way of only displaying content for specific versions of Internet Explorer.
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
There is a project called Push Up the Web which advises all users to upgrade to newer versions of their browsers. It is unobtrusive and easy to add.
As some have suggested, the best thing to do is use conditional comments to target Internet Explorer effectively.
To the other commenters, with the release of Internet Explorer 8 (which effectively added two additional browsers to test: standards + compatibility mode), Internet Explorer 6 has run its course. It is time for those people to upgrade browsers and in some cases OSes/computers. Internet Explorer 6 is holding back the progression of the web. It's a drain in resources to support. It has reached Netscape 4 status. Major sites and companies are joining the battle as well.
And more reading:
My advice is not to use a popup window or a message box. They are very annoying and make for a bad user experience. Better insert some <div> with the notice and make it stand out from the rest of the page. Don't overdo it, just assign it some colours that makes sure it is not overlooked
(and please: Don't use <blink> ;-)
Although telling users to update their browsers and them actually doing it would be great it really isn't going to happen. If the user hasn't upgraded their browser by now there is normally a reason for it, lack of computer knowledge or no control over the computer itself. For example employees browsing your site on work machines.
I really think you should reconsider fixing the issues that your users will have or consider progressive enhancements. The idea is that the basic functionality of your website works in every browser, then any extra functionality is developed so that it is only visible / useable on browsers that can support it.
My suggestion would be to fix your site ;) No seriously, I would use a small banner on top of the page, like the small unobtrusive dialogs in Firefox and IE. Not a messagebox or something that would actually interfere to much.
