The End of Internet Explorer 6 (IE6)

IE6 Recycled

Empty Recycle Bin

Nearly 10 years after it’s release date and long overdue, several major web sites, YouTube in conjunction with Google for instance, have made statements that they are ending support for IE6. Even Microsoft is campaigning to move people away from the antiquated browser, even though Microsoft has committed to support it until the year 2014.

Opinions amongst web developers and designers have been varied on whether to keep designing web sites that support IE6 or to just end it and let the last of the IE6 users experience a broken layout or unusable functions. Up until now, Midwest Web Trends has continued to support IE6, but with other major websites ending support for IE6, and with IE9 now moving into the spotlight, I felt the need to join the cause of putting an end to IE6. However, I didn’t want to leave the last of the IE6 users wondering what is wrong with the web page they are visiting. I wanted to put a notice on my web pages for IE6 users so they would at least know why the page layout or certain page functions might appear to be broken.

If you happened to visit YouTube using IE6 within the past several months, you probably have noticed that there is a message stating that your browser is no longer supported.

Youtube IE6 Notice

Youtube's Notice to IE6 Users

I decided to take a page from YouTube and create my own IE6 notice to users, modeling it after the YouTube version and it looks like this.

IE6 Notice

Midwest Web Trend's Notice to IE6 Users

Do you want to put this on your own website to give IE6 users a nudge in right direction?

It’s easy. Here’s how:

Copy and paste the following code into your HTML document. You’ll probably want to put it just after the opening <body> tag in most cases.

<!--[if lte IE 6]>
  <script type="text/javascript">
    function hideDiv(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
  </script>

  <div id="stopie6" style="margin: 8px auto; text-align: center; width: 900px; background: #edf0cd; padding: 8px; position: relative;">
    <img src="/stopie6images/exclamation.jpg" alt="" style="position: absolute; top: 5px; left: 5px;" />
    <script type="text/javascript">
      document.write("<a style=\"padding-right: 12px; background: url('/stopie6images/close.jpg') no-repeat right top; font-size: 8px; text-decoration: none; display: block; position: absolute; top: 5px; right: 10px; color: #333;\" href=\"#\" onclick=\"hideDiv('stopie6', 'none');\";>Close</a>");
    </script>
    <h3 style="color: red; margin: 15px 0 0 0;">Notice: You are using an outdated, unsupported, and insecure web browser, IE6.</h3>
    <p style="margin: 8px;">Web community support for Internet Explorer 6 has ended. Make sure and update your browser so you can continue to view your favorite websites. Below are some links to several of the more popular current web browsers, all of which are absolutely free.</p>
    <div>
      <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx"><img style="border: none" alt="Download Internet Explorer 8"src="/stopie6images/ielogo.jpeg" /></a>
      <a href="http://www.opera.com/"><img style="border: none" alt="Download Opera Web Browser" src="/stopie6images/opera.jpeg" /></a>
      <a href="http://www.google.com/chrome/"><img style="border: none" alt="Download Chrome Web Browser" src="/stopie6images/chrome.jpeg" /></a>
      <a href="http://www.apple.com/safari/"><img style="border: none" alt="Download Safari Web Browser" src="/stopie6images/safari.jpg" /></a>
      <a href="http://www.mozilla.com/en-US/firefox/"><img style="border: none" alt="Download Firefox Web Browser" src="/stopie6images/firefox.jpeg" /></a>
    </div>
  </div>
<![endif]-->

There’s just one thing left to do. You’ll need the images to go along with that code. You can download the the images from this link:

stopIE6 images

Unzip the downloaded file, and then load the entire stopie6images folder to your web server document root, generally “public_html”.

That’s all there is to it. Here is a break down of the code above:

<!--[if lte IE 6]>
<![endif]-->
This is an IE conditional comment that targets only IE6 and earlier versions of Internet Explorer. Of course, anyone using something earlier than IE6 must have just emerged from a cave in the mountains, but it’s there for good measure. What this means is that any HTML code within the conditional comments will only be displayed for Internet Explorer version 6 and earlier. Internet Explorer 7, 8 and 9 will ignore it as will all other browsers (Firefox, Chrome, Safari, etc.).

<script type="text/javascript">
function hideDiv(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
This is a simple JavaScript function that will hide an HTML element for a given id when executed. This will be used to hide the IE6 notice when the user clicks the close button. Remember that non IE6 users will not see the notice to begin with.

If you know even a little HTML, then the rest of the code should be self explanatory. The only other item of interest is the JavaScript for the close button.

<script type="text/javascript">
document.write("<a style=\"padding-right: 12px; background: url('/stopie6images/close.jpg') no-repeat right top; font-size: 8px; text-decoration: none; display: block; position: absolute; top: 5px; right: 10px; color: #333;\" href=\"#\" onclick=\"hideDiv('stopie6', 'none');\";>Close</a>");
</script>
The code for the button is displayed using the document.write command so that IE6 users who have JavaScript disabled will not see a broken close button. And finally the JavaScript onclick event handler calls the hideDiv function created above which closes the IE6 notice when the close button is clicked.

Click the close button and the notice disappears. Reload the page and it’s back again. Go ahead and try it out below:


Notice: You are using an outdated, unsupported, and insecure web browser, IE6.

Web community support for Internet Explorer 6 has ended. Make sure and update your browser so you can continue to view your favorite websites. Below are some links to several of the more popular current web browsers, all of which are absolutely free.

Download Internet Explorer 8 Download Opera Web Browser Download Chrome Web Browser Download Safari Web Browser Download Firefox Web Browser

This will help give that small percentage of persistent IE6 users a little nudge in the right direction. Also, if you decide to completely drop support for IE6, this will help to show the IE6 users that it isn’t you’re web site that’s broken, but the fact that they are using an obsolete and outdated browser.

This entry was posted in HTML/xHTML, Web Browsers, Website Administration and tagged , , , , , . Bookmark the permalink.

4 Responses to The End of Internet Explorer 6 (IE6)

  1. Margaret says:

    Just where is the facebook like button ?

  2. Johannes says:

    Love it! Found this looking for a ready made graphic to convey my feelings about how so much effort is put into supporting IE6!
    And thanks to you, I not only found a suitable graphic, but the drop in code as well!
    Vielen dank!

  3. Awesome! Glad to hear you could put that code to use. The more people that drop IE6, the better for us all, both developers and former IE6 users…

  4. Dede Greynolds says:

    I do believe all of the concepts you’ve presented on your post. They’re very convincing and can certainly work. Nonetheless, the posts are very short for beginners. May just you please prolong them a bit from subsequent time? Thank you for the post.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Proudly powered by WordPress.
preloaded image preloaded image preloaded image preloaded image preloaded image