Josef Richter » chrome http://www.josefrichter.com/blog blogging about the world around Sun, 25 Jul 2010 17:20:44 +0000 en hourly 1 http://wordpress.org/?v=3.0 IE6 no more. And IE7 and IE8… http://www.josefrichter.com/blog/ie6-no-more-and-ie7-and-ie8/ http://www.josefrichter.com/blog/ie6-no-more-and-ie7-and-ie8/#comments Tue, 18 Aug 2009 19:56:58 +0000 Josef Richter http://www.josefrichter.com/blog/?p=225 UPDATE: now with new Opera icon

You may have heard about the IE 6 no more initiative. It asks webmasters to put a banner on their page, which detects Internet Explorer 6 and suggests to download ‘a modern browser’ instead.

While I generally support the initiative, the banners are unusable for me. One of the browsers suggested is Internet Explorer 8. I would never ever dare to suggest anyone using any version of Internet Explorer made so far. So I made my version of the banner:

Warning!
You are using a subprime browser
It may render this site incorrectly. Please upgrade to a modern web browser.

Get Google Chrome
Get Firefox
Get Safari
Get Opera

 

What’s different?

  • It shows up to users of all versions of IE. Yes, including those with IE8.
  • It suggests Opera instead of IE8, along with FIrefox, Safari and Chrome

I also changed the design a bit to be more minimalist. Feel free to grab the below code and put it on your website. The images are hosted here, so you don’t need to download them (but feel free to do so). You can also adjust the code to better match your website design.

I made two sizes of the banner: 640×75 and 470×50 (for this blog).

So here is the code for 640×75 banner:

<!--[if IE]>
	<div style="text-align: center; clear: both; height: 74px; padding-bottom: 1px; position: relative;">
  <div style="width: 620px; border: 1px solid #f0f0f0; background: #f0f0f0; margin: 0 auto; text-align: left; padding: 0 10px 0 10px; overflow: hidden; color: black;">
    <div style="width: 80px; float: left;"><img src="http://www.josefrichter.com/noie/warn_75.png" alt="Warning!"/></div>
    <div style="width: 300px; float: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;">
      <div style="font-size: 14px; font-weight: bold; margin-top: 12px; color: #c00;">You are using a subprime browser</div>
      <div style="font-size: 12px; margin-top: 2px; line-height: 16px; color: #666;">It may render this site incorrectly. <br />Please upgrade to a modern web browser.</div>
    </div>
		<div style="width: 60px; float: left;"><a href="http://www.google.com/chrome" target="_blank"><img src="http://www.josefrichter.com/noie/chrome_75.png" style="border: none;" alt="Get Google Chrome"/></a></div>
    <div style="width: 60px; float: left;"><a href="http://www.firefox.com" target="_blank"><img src="http://www.josefrichter.com/noie/firefox_75.png" style="border: none;" alt="Get Firefox"/></a></div>
    <div style="width: 60px; float: left;"><a href="http://www.apple.com/safari/download/" target="_blank"><img src="http://www.josefrichter.com/noie/safari_75.png" style="border: none;" alt="Get Safari"/></a></div>
		<div style="width: 60px; float: left;"><a href="http://www.opera.com/download" target="_blank"><img src="http://www.josefrichter.com/noie/opera_75.png" style="border: none;" alt="Get Opera"/></a></div>
  </div>
</div>
<![endif]-->

and here for the 470×50 version:

<!--[if IE]>
<div style="text-align: center; clear: both; height: 49px; padding-bottom: 1px; position: relative;">
	<div style="width: 450px; border: 1px solid #f0f0f0; background: #f0f0f0; margin: 0 auto; text-align: left; padding: 0 10px 0 10px; overflow: hidden; color: black;">
		<div style="width: 60px; float: left;">
			<img src="http://www.josefrichter.com/noie/warn_50.png" alt="Warning!">
		</div>
		<div style="width: 230px; float: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;">
			<div style="font-size: 11px; font-weight: bold; margin-top: 4px; color: #c00;">
				You are using a subprime browser
			</div>
			<div style="font-size: 10px; margin-top: 0px; line-height: 13px; color: #666;">
				It may render this site incorrectly. Please upgrade to a modern web browser.
			</div>
		</div>
		<div style="width: 40px; float: left;">
			<a href="http://www.google.com/chrome" target="_blank"><img style="border: none;" src="http://www.josefrichter.com/noie/chrome_50.png" alt="Get Google Chrome"></a>
		</div>
		<div style="width: 40px; float: left;">
			<a href="http://www.firefox.com" target="_blank"><img style="border: none;" src="http://www.josefrichter.com/noie/firefox_50.png" alt="Get Firefox"></a>
		</div>
		<div style="width: 40px; float: left;">
			<a href="http://www.apple.com/safari/download/" target="_blank"><img style="border: none;" src="http://www.josefrichter.com/noie/safari_50.png" alt="Get Safari"></a>
		</div>
		<div style="width: 40px; float: left;">
			<a href="http://www.opera.com/download" target="_blank"><img style="border: none;" src="http://www.josefrichter.com/noie/opera_50.png" alt="Get Opera"></a>
		</div>
	</div>
</div>
<![endif]-->

Please leave a comment if you like it. Thank you and enjoy!

]]> http://www.josefrichter.com/blog/ie6-no-more-and-ie7-and-ie8/feed/ 4