How To: Join the Civil Disobedience Movement Against IE6

On Friday, I wrote about how some of the top sites in Norway decided to notify users that they were using a legacy browser and suggesting that people upgrade to the latest version of IE or try alternative browsers.  They accomplished this task by putting a really ugly green box on their screen offering links to the newer versions.  Towards the end of my post, I thought I wouldn’t be true evangelist if I didn’t put my money where my mouth is, so I decided to make my blog IE6 UNFRIENDLY and notify my visitors that browser nirvana does truly exist.

Today, over a good night of sleep, I thought, why can’t I empower the world to join this fight against IE6?  What’s the worse that could happen?  At most, I’d get fired, but I’d be a martyr for web designers everywhere.  So against my better judgement, here is the bit of HTML needed to inform your site visitors that they’re browser is making web a horrible place to work.  Paste bit of code somewhere on your main page and the laggards will be hit with some big green ugliness on their site.

 <!--[if lte IE 6]>
<style type="text/css">
#ie6msg{border:3px solid #090; margin:8px 0; background:#cfc; color:#000;}
#ie6msg h4{margin:8px; padding:0;}
#ie6msg p{margin:8px; padding:0;}
#ie6msg p a.getie7{font-weight:bold; color:#006;}
#ie6msg p a.ie6expl{font-weight:normal; color:#006;}
</style>
<div id="ie6msg">
<h4>Did you know that your browser is out of date?</h4>
<p>To get the best possible experience using our website we recommend that you upgrade your browser to a newer version. The current version is <a class="getie7" href="https://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 7</a> and <a class="getie7" href="https://www.microsoft.com/windows/Internet-explorer/beta/default.aspx">Internet Explorer 8</a> is available as a beta. The upgrade is free. If you're using a PC at work you should contact your IT-administrator.</p>
<p>If you want to you may also try some other popular Internet browsers like <a class="ie6expl" href="https://www.opera.com">Opera</a>, <a class="ie6expl" href="https://mozilla.com">FireFox</a> or <a class="ie6expl" href="https://www.apple.com/safari/download/">Safari</a></p>
</div>
<![endif]-->  

Have a great weekend!