Web Development Blog

OK, so you spend the whole day trying to get this huge project out of the way, but just as you are about to finish up, you decide to run it through all the other browsers to make sure that your work is up to standard and that the maximum amount of Internet users can view your site as it was intended…

Firefox works perfectly, as does IE7, Opera and Safari - all except IE6… *sigh* I truly hate the fact that there are still people using Internet Explorer 6!

I think the problem is that a lot of these people don’t realize that there are newer browsers available and there is nobody to inform them. The fact that we keep tweaking for IE6 (and older) only helps for one thing: keeping these people in the dark ages!

What I propose to do is simple: we just start adding a notification block to the top of pages when they are being opened by Internet Explorer 6 or earlier. This is also a lot easier than it sounds.

The first thing we need to do is to create a stylesheet that will only be read by IE6 or earlier and Microsoft actually provided for this to be doable when they added conditional comments to their browsers. We will call this stylesheet “oldie.css” and we call this in the header of our page, wrapped in the conditional comments like this:

<!–[if lte IE 6]><link rel=”stylesheet” href=”[stylesheet folder]/oldie.css” type=”text/css” media=”screen” /><![endif]–>

This basically means: If the browser is lower or equal to Internet Explorer 6, load “oldie.css”

Ok now that we have the browser-specific stylesheet in place we can make it work for us.

You can now create a container at the top of your page with some sort of message in it, telling your visitors to go get a newer browser to stop seeing the notification.

Now this is where the browser-specific stylesheet comes into play. In the normal stylesheet we will set the display value of the container to “display: none;” and in “oldie.css” we will set it to “display: block;” causing only people using Internet Explorer 6 or earlier to see this container.

Here is a zip file with all the files you will need, You are most welcome to use this on your site: Download

(If you access superevil.za.net with IE6 or earlier, you will see this element in action!)

Just as an extra note, I think that we should continue (at least for now) with tweaking our sites to work on older browsers, but if enough people start doing this we will create the awareness we need to phase out IE6 completely.

Over and Out!

UPDATE: James from MentallyRetired had a very similiar idea.