OK, so I feel it is officially time to kill IE 6 and below. IE 6 has been the bane of web developers’ existence for quite some time now. I say, just kill it. If your product manager whines and says “but we need to support all browsers” insist that they reconsider. Management and product managers don’t understand the real cost associated with supporting this awful browser. Many think that it’s simply a little more tweaking. It’s not. If they truly knew how bad it is they’d understand.
I also think that there’s a bigger picture here. If your site doesn’t work in IE6, it will actually propel people to upgrade. So don’t enable (“enable” as in, allow someone to continue their addiction) it and eventually people will get the picture.
The last site I built had IE6 traffic of 1.6%. I’m sure those people were at their corporate offices when they looked at the site. So they had to go home to their Macs and use Firefox or Safari. Big deal, I say.
I do think you should actually check for someone using the browser and tell them they suck. So, here’s a quick hack to put an end to IE 6 once and for all.
Assumption: You have a main div on your page that has an id of “main”. We need this to hide the whole page. If you’ve got it named something else, just change the id in the style definitions below. If you don’t have one at all, you’ll need to wrap all your existing content inside of the new div.
<div id=”main”>
the rest of your page content here
</div>
</body>
Stick this somewhere in your head tag. Make sure it comes BEFORE the IE-specific directives below it.
#ie-upgrade {
display: none;
}
</style>
Now put this after that:
<style type=”text/css” media=”screen”>
#main {
display: none;
}
#ie-upgrade {
display: inline-block;
color: white; /* my site had a black background. remove this line if yours doesn’t */
font-size: 650%; /* was really trying to hammer it home */
font-weight: bold;
margin: 20px;
}
</style>
<![endif]-->
Finally, add this to your page after the <body> tag, but before (outside of) the “main” div discussed above.
P.S. If you have Google Analytics code on your site, keep it outside the main div too.