Jun 252010
 

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.

<body>
<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.

<style type=”text/css”>
#ie-upgrade {
 display: none;
}
</style>

Now put this after that:

<!--[if lte IE 6]>
<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.

<div id=”ie-upgrade”>This site is not supported in your version of Internet Explorer. Please upgrade to IE 7 or above, <a href=”http://www.mozilla.com/en-US/firefox/personal.html”>Firefox</a>, <a href=”http://www.apple.com/safari/download”>Safari</a>, or <a href=”http://www.google.com/chrome”>Chrome</a>.</div>

P.S. If you have Google Analytics code on your site, keep it outside the main div too.

 Posted by at 1:27 pm  Tagged with:

 Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.