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:
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!
Tags: chrome, explorer, firefox, google, ie6, ie7, ie8, opera, safari
Barely any PC has “Lucida Grande” installed, so it kinda defeats the purpose of putting it in there
Best to just leave sans-serif, or if you really need, stuff Verdana in there.
you’re right. I added ‘Lucida Sans Unicode’ and Arial as fallback typefaces. completely forgot it’s “slightly different Lucida” on PC. thank you
I’m not sure I made it clear: NOBODY except maybe type/designer ppl have Lucida installed. Best to keep it at “sans-serif”
Mark, still not sure if I get it right. I thought Lucida Sans Unicode comes pre-installed on all Windows versions since Win98. Lucida Grande comes preinstalled on Mac OS X, probably since version 10.0. See http://en.wikipedia.org/wiki/Lucida_Sans_Unicode
Did you mean something else?