Internet Explorer

Start Transitioning Your Userbase Away From Internet Explorer 6

Alex Ford

Aug 1, 2011 • 3 min read

Internet Explorer 6 has been a thorn in almost every web developer's backside at some point in time. It was the default browser that came with Windows XP and because XP was a good operating system it has persisted through time and space. Microsoft themselves have been trying desperately to get people to upgrade. Because this browser has stuck around for so long, many companies have forced their IT teams to continue support for the browser. It's rendering and javascript engines are so vastly different from any other browser that teams often have to write an entirely different set of code just to support it.

The company I work for finally gave in and let us begin the deprecation of IE 6. The easiest way to do this is to place a banner on your site that only pops up when users using IE 6 visit the site. The banner will explain that IE 6 is no longer supported and that they should upgrade if they want a better experience on your site. I found a simple cut and paste banner elsewhere on the web but the logos for the alternative browsers were outdated because they listed version numbers. I took the liberty of duplicating this banner but made the browser logos more generic so that the banner will remain up to date.

To use my updated banner simply copy the code below and paste it into your site just after the <body> tag.

<!--[if lt IE 7]>
    <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
        <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'>
            <a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'>
                <img src='http://www.codetunnel.com/content/images/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/>
            </a>
        </div>
        <div style='width: 780px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
            <div style='width: 75px; float: left;'>
                <img src='http://www.codetunnel.com/content/images/ie6nomore-warning.jpg' alt='Warning!'/>
            </div>
            <div style='width: 400px; float: left; font-family: Arial, sans-serif;'>
                <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>
                    You are using an outdated browser
                </div>
                <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>
                    For a better experience using this site, please upgrade to a newer web browser.
                </div>
            </div>
            <div style='width: 75px; float: left;'>
                <a href='http://www.google.com/chrome' target='_blank'>
                    <img src='http://www.codetunnel.com/content/images/browser_logos/chrome.jpg' style='border: none;' alt='Get Google Chrome'/>
                </a>
            </div>
            <div style='width: 75px; float: left;'>
                <a href='http://www.firefox.com' target='_blank'>
                    <img src='http://www.codetunnel.com/content/images/browser_logos/firefox.jpg' style='border: none;' alt='Get Firefox'/>
                </a>
            </div>
            <div style='width: 73px; float: left;'>
                <a href='http://www.apple.com/safari/download/' target='_blank'>
                    <img src='http://www.codetunnel.com/content/images/browser_logos/safari.jpg' style='border: none;' alt='Get Safari'/>
                </a>
            </div>
            <div style='width: 75px; float: left;'>
                <a href='http://www.browserforthebetter.com/download.html' target='_blank'>
                    <img src='http://www.codetunnel.com/content/images/browser_logos/ie.jpg' style='border: none;' alt='Get Internet Explorer'/>
                </a>
            </div>
        </div>
    </div>
<![endif]-->

The above code will produce the following result in IE 6: