Josef Richter » firefox 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 Two great Firefox user interface plugins http://www.josefrichter.com/blog/two-great-firefox-user-interface-plugins/ http://www.josefrichter.com/blog/two-great-firefox-user-interface-plugins/#comments Tue, 21 Apr 2009 11:30:54 +0000 Josef Richter http://richter.wordpress.com/?p=38 I am using two Firefox plugins that adjust the user interface and improve the workflow at least for me.

First is Tab Mix Plus. It adds plenty of setup options for Firefox tabs, but the most important for me is “protect tab” option. It lets you select which tabs are protected from being accidentaly closed, eg when you close multiple tabs at once. This is useful a tab with Google Docs or Gmail for example.

Tab Mix Plus also lets you have the tabs in multiple rows. This is very useful for people like me who use to have plenty of tabs opened at the time. Another option is the second plugin called Tree Style Tab.

Tree Style Tab moves your tabs to sidebar and even lets you have related tabs in a tree-like hierarchy.

See both plugins in action in this picture:

Firefox tabs plugins

Firefox tabs plugins

]]> http://www.josefrichter.com/blog/two-great-firefox-user-interface-plugins/feed/ 0