IE6 Browser Warning Message

Recently I’ve been talking about Internet Explorer 6 and how support for it is slowly dropping, and soon we will see it disappear for good, but there are still people that use this browser, whether it by choice or that they are forced to, you have to keep in mind that people will view your site in Internet Explorer 6, but these days it is very hard to get modern CSS 2.1 websites to display 100% in Internet Explorer 6 without hacking your code to hell and back. This small addition to your webpage will display an IE6 specific message to any IE6 user.

You may hate Internet Explorer 6 with a passion, but you have to be rational here. You could simply add a script to your website which completly blocks Internet Explorer 6 users completly, but really whats the point in that? Like I said while it may be a minority of users that use Internet Explorer 6, there still traffic none the less. So straight blocking them is a tad harsh no? Instead the more rational method is to create a message that displays to IE6 users only. Which we will create now:

Conditional Comments

For people that haven’t already heard of Conditional comments they are basically browser specific messages which hide in your source code unless the actual browser it references is being used to display the website. Conditional comments are one of the great methods of creating CSS hacks for your website to display in older browsers, but we can also use them to display certain content to a specific user that uses the referenced browser. Here’s the code we’re going to use:

<!--[if lte IE 6]>
   <div id="ie-message">
      It appears you are viewing this webpage in Internet Explorer 6. This website is not compatible with Internet Explorer 6 and therefore by using Internet Explorer 6 to view this website you may encounter horrible design errors and weird layout problems. It is recommended that you update your Internet Explorer Browser installation to at least Internet Explorer 7 or above. You can do this by <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">clicking here</a>
   </div>
<![endif]-->

Place this code on wherever you want the message to appear. I placed mine before any content so a Internet Explorer 6 user could clearly see the message. You place it wherever you see fit.

Style the IE6 Warning Message

If you were to view the message in Internet Explorer 6 right now it would work but probably not look great, this is because we need to style the message with CSS. You’ll notice in the code I had already included a div called ie-message all you need to do is open up your websites main stylesheet and add in this:

#ie-message {
background:#db2e2e;
border:1px solid #333;
color: #fff;
padding:15px;
font-size:14px;
font-weight:bold;
letter-spacing:-1px;
margin-bottom:10px;
}

#ie-message a {
color:#fff;
text-decoration:underline;
}

You may want to modify this styling information to fit your website design. But thats all you need to do. So now when someone using IE6 views your website they will see this message telling them they are using a browser which you don’t support, a friendly message rather than straight blocking IE6 traffic which really when you think about it is very extreme and quite frankly stupid.

Viewing your website in Internet Explorer 6

So you probably want to test out your website to make sure this message is appearing. Now most of us have Internet Explorer 8 installed and as you know the Internet Explorer Installation overwrite any current browser version so how can you view your website in Internet Explorer 6. There are a couple of simple ways. One easy option is to install something called Multiple IEs which will allow you to run Internet Explorer Versions 3, 4, 5 and 6 it essentially emulates the browser allowing you to use it as if it was the full installation, or if you really don’t want to install anything you can use a website called BrowserShots which is a free service which allows you to screenshot your website in all different types of browsers which then you can check to see if everythings displaying correctly. There the main methods I’d use.

And finally here’s the screenshot of what my Internet Explorer 6 message looks like:

My message is slightly different to the one in the example code as mine is slightly personal. But thats what it looks like if you use the code above! Enjoy.