IE6 denial

IE6 denial

A problem all web designers know is making a website work in Internet Explorer 6. IE 6 is not standards conforming. So even when you, as a designer, stick to the W3C rules there’s quite a chance your website won’t render as it should. A few big websites (i.e. Youtube, Apple’s MobileMe) already banned IE6 and even Javascript guru Douglas Crockford has called for a global IE6 boycott. Although the market share is rapidly declining, quite a large portion still seems to be using it; especially in Asia and Africa (+/- 21%).

IE6 Percentage

IE6 Percentage

Why? IE6 was released in 2001, and even failed to properly support the CSS 1.0 standard from 1996…

IE6 Why?

IE6 Why?

We have to stop this oldie hold us back and make the Internet a better place 🙂

Free the web suggests:

  • make sure your browser is up to date
  • help others to get up to date
  • if you are a web designer, stop supporting IE6
  • spread the word: Boycott IE6

Ajaxian follows a more aggressive approach: amelie()

I would suggest we all just copy and paste the following code onto your site:

<!--&#91;if lt IE 7&#93;>
<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="#" mce_href="#" onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src="http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg" mce_src="http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg" style="border: none;" mce_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" mce_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;" mce_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;" mce_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 style='width: 75px; float: left;'><a href="http://www.firefox.com" mce_href="http://www.firefox.com" target='_blank'><img src="http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg" mce_src="http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg" style="border: none;" mce_style="border: none;" alt='Get Firefox 3.5' /></a></div>
<div style='width: 75px; float: left;'><a href="http://www.browserforthebetter.com/download.html" mce_href="http://www.browserforthebetter.com/download.html" target='_blank'><img src="http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg" mce_src="http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg" style="border: none;" mce_style="border: none;" alt='Get Internet Explorer 8' /></a></div>
<div style='width: 73px; float: left;'><a href="http://www.apple.com/safari/download/" mce_href="http://www.apple.com/safari/download/" target='_blank'><img src="http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg" mce_src="http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg" style="border: none;" mce_style="border: none;" alt='Get Safari 4' /></a></div>
<div style="float: left;" mce_style="float: left;"><a href="http://www.google.com/chrome" mce_href="http://www.google.com/chrome" target='_blank'><img src="http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg" mce_src="http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg" style="border: none;" mce_style="border: none;" alt='Get Google Chrome' /></a></div>

< !&#91;endif&#93;-->

And IE6 users would get this nice notification when visiting your website(s):

IE6 No More

IE6 No More


No Comment.

Add Your Comment