If you're like me, you probably hate IE6. 80% of my CSS debugging is spent on IE6, as well as 70% of my JS debugging. It's an incredible waste of time. So why not try to encourage our visitors to move away from that piece of crap? It's quite easy, you'll see. All it requires is a bit of HTML.

There's a very interesting feature in IE's HTML processing engine: conditional comments. This feature allows you to specify portion of HTML that will be interpreted based on the browser version. The code itself looks very simple:

<!--[if CONDITION]>
...HTML code to interpret
<![endif]-->

The CONDITION part represents an expression that lets you restrict the result of the test to a specific condition. For example, you can test for IE generically:

<!--[if IE]>
This is Internet Explorer
<![endif]-->

Or, you can restrict even more by limiting to version up to IE6:

<!--[if lt IE 7]>
This is Internet Explorer 6 or earlier
<![endif]-->

Got it? Easy, huh? Now let's put that in practice. Let's first draft some CSS to create a nice banner at the top of the screen:

#iewarn {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 25px;
  padding-top: 5px;
  font-family: tahoma, sans-serif;
  background: #ffffcc;
  font-size: 0.9em;
  font-weight: normal;
  color: #334433;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px #aaa solid; }

Now, let's mix this with a conditional comment:

<!--[if lt IE 7]>
  <div id="iewarn">Hey, looks like you're
  still using an obsolete version of
  Internet Explorer!</div>
<![endif]-->

And here's the result:

You can also add a link to explain to your visitors why they should change their browser. Personnaly, I direct them to the Save the Developers initiative, that explains clearly why IE6 sucks. Of course, if your audience is not tech-centric, you may choose a more comprehensive explanation, or write your own.

That's all, folks!