Move your visitors away from IE6

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!


6 Responses to “Move your visitors away from IE6”

  • John Says:

    Excellent post – I’ll definitely add this to my sites!
    I already use conditional comments for calling in different stylesheets for IE and IE6, but hadn’t thought of doing what you suggested.

    Another way of doing it (based on the above) would be to simply ad your html and set the div to display:none by default, and to display normally in the conditional style sheets – which might clean up the html markup a little.

  • Marc Alagem Says:

    Thanks, John. There’s actually another method for doing this, and that would rely on how IE (again) handles one-line comments in CSS files. For example, you could have the following:

    .myclass {
    bla-bla-bla;
    //display: none;
    }

    Everything following the ‘//’ comment indicator would be ignored by FF, opera and other browsers, but interpreted by IE…

  • krishnakant Says:

    great, i love this,but is there any technique
    after displaying the issue(top thing) it hide autometically

  • Simon Douglas Says:

    Good post, and a technique that is growing in popularity.

    Marc – the problem with your approach is that of accessibility; that is, if you access the page with CSS turned off, then it will still read through it, whereas with conditional comments it will be completely ignored.

  • Rodrigo Neves Says:

    another option is to use javascript. A good solid example is http://www.pushuptheweb.com which is now available based on jquery, dojo and mootools. Other versions (for CMS’s) are also available on the website.

  • Marc Says:

    Simon & Rodrigo, you’re both right: there are other ways to make this work, I don’t claim to have the perfect solution. But, the most important point is that people realize they must stop using IE6 and move to something more stable and secure. So the solution lies not only in the technique but also in the message.

Leave a Reply