Even Microsoft is sick of Internet Explorer 6, and they have finally started making a real push to get people to stop using it and upgrade to a better browser. They even started a website dedicated to tracking the, hopefully dwindling, use of IE6 – http://ie6countdown.com/. On this website they encourage people to spread the word on twitter via the #ie6countdown hashtag, and they also offer a banner you can put on your website, that would only appear to IE6 users and it encourages them to upgrade to a better browser. Naturally the better browser being IE9. Or is it?
As Steve Webster astutely points out, people who use IE6 will not be able to upgrade to IE9, instead the most recent version of Internet Explorer they could upgrade to is 8. IE8, while definitely an improvement over IE6, is a far cry from a modern, standards based browser. As web developers the last thing we want to happen is for IE8 to become the new lowest common denominator. Moreover, the banner is, to be frank, ugly. Just look at it.
Dear lord, who the heck designed this atrocity? My cat could make something better looking by randomly walking on the keyboard and playing with the mouse. Anyway, inspired by Steve’s post, my own hatred of IE6 and of course the need to prevent people from looking at that terrible banner, I decided to come up with my own version. One that not only looks nicer but also links to a proper modern browser – Firefox. (Of course feel free to change this to your own browser of choice, like Chrome or Opera, when you implement it on your website.)
And here is the code for it
<!--[if lt IE 7]><a href="http://www.getfirefox.com/" title="Get a more secure, faster browser, for a better internet" style="display: block; height: 30px; font: normal bold 12px/30px sans-serif; color: #191919; background: #ffe190 url(http://www.iliadraznin.com/uploads/alert-icon.gif) 10px center no-repeat; border: 1px solid #666; padding-left: 45px; text-decoration: none;">You are using an outdated and unsafe browser. For faster, safer and better browsing experience, upgrade for free today.</a><![endif]-->
As you can see, the only image here is the alert icon, other than that it’s all CSS so easily adaptable to your site. And I won’t hold it against you if you change the “lt IE 7” condition to maybe “lt IE 9”, or even just “IE” 😉
Let me know if you end up using this code, or an alternative of it, I’d love to see it in action.