Fighting compatibility issues with IE6 is one of the most frustrating things developers have to deal with. It takes up a disproportionate amount of development time to ensure backwards compatibility with software more than 10 years old. Well, we’re not gonna do it any more.
At JDM Digital, our code is W3C & HTML5 standards-based, however we will no long be supporting or guaranteeing compatibility with IE6 or earlier on any of our digital assets or produced technologies. Before you think we’re just being lazy, consider that we’re not the first to drop IE6 compatibility–and we will certainly not be the last.
- Google Dropped IE6 in 2008
- YouTube kissed it goodbye in 2009
- Facebook Dropped it last year
- WordPress dropped the hammer a few months ago
And the pattern continues to grow with even Microsoft counting down to the end of IE6.
Why all the IE6 hate?
Microsoft released Internet Explorer 6 (IE6) in late 2001. For its time, it was a revolution in web browsing, but these days (ten years later) it’s not standards-compliant and it restricts what a web page is able to do which holds developers back.
What can I do about it?
Besides making sure you’re using an updated browser, you could add the following code to the header of your site and help kill this silly IE6 thing.
What the code generates:
Here’s what the code generates for users browsing the web with IE6.
The code to cut and paste:
Here’s the code. Thanks to ie6nomore.com.
<!--[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.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
<div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; 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 modern web browser.</div> </div> <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div> <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div></div></div>
<![endif]-->