One of the first posts I wrote on this blog was a tiny little script that detects whether your visitor is using a particular version (or less) of Internet Explorer and then redirects them to a page explaining that they should get their ass in gear and get a better browser.
Well, my loathing of Internet Explorer has not lessened, but I have begun employing a much easier way of notifying my visitors about their poor choice of browsers.
Before I get to that though, I should say I do understand that many people using the (soon to be decade old) Internet Explorer 6 are doing so because they can’t upgrade (due to Windows Genuine Advantage) and don’t know/understand their alternatives.
So, to you IE6 users, please listen. I know Microsoft is a big multi-gazillion dollar company. I know that it would seem they should be the go-to company for trusted software products. But I also know that when it comes to Internet browsers – they are just way off the mark.
Sure, upgrading to a new browser may seem like a big scary thing, but it’s not. Hell, you don’t even need to uninstall your copy of Internet Explorer if you’re that attached to it (but I promise after using any of the alternatives for more than a day you’ll forget it’s even on your hard drive).
Now – go grab yourself a copy of Firefox, Opera, Safari or Google Chrome and do the world a favour by helping put down the sickly animal that is IE6.
Got a site? Spread the word:
As I mentioned before my little diatribe, I am now inserting a tad of code into my Web sites to gently let visitors know about their (perhaps innocent use of a) pathetic browser.
The code makes use of conditional comments.
By simply placing the following right after your <body> tag, you’ll insert a nice little notice at the top of your page for anyone browsing your site with Internet Explorer 6 or less:
<!--[if lte IE 6]><div class="notice"><strong>Notice:</strong> You're using an out of date browser (released more than 7 years ago). To view this page properly, we recommend using a modern, standards-compliant browser - such as <a href="http://www.firefox.com">Firefox</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://www.apple.com/safari/">Safari</a> or <a href="http://www.google.com/chrome">Google Chrome</a>. All of which are 100% free.</div><![endif]-->
Now, you’ll notice that the main container div above has a class called “notice”, that’s because I’m a man who digs a bit of style. By throwing the following line in your site’s CSS file (or between <style> tags in your page’s head) it’ll pretty the notice up a bit:
.notice {margin:5px 0;padding:10px;border:1px solid #dedeb9;background:#ffffd4;text-align:center;}
The result:
And if you REALLY want to spread the word
Here’s a little button you can throw on your Web site to help encourage others to do the same:
That’s even better, had to use to make it work though. Thanks again. =)
oh crap that didn’t work out, I meant that the last part of the code is missing a -
hi am using SEOSimple for http://www.hiittech.com i got asome results
Thanks
Fraz
I stopped using IE many years ago, and I’ll never come back for sure!
That’s a clever idea! IE6 is such a disaster. I hate doing design work and (at the end) having to go back and fit this that and the other thing that won’t render properly in IE6 (and even IE7!).
I’ll definitely bookmark this and weave it into some of my future design work.
Your cause is mine. I will spread the gospel.
As a web developer I hate Internet Explorer (wish that it was never created) because working on how to make sites work on all browsers is a headache! Most of my works which is working perfectly on Firefox, Opera, Safari and Chrome was being rejected by the non-standards IE. If not for my job IE should have been long gone on my PC.
Cool, Youtube takes place against IE6 And Web Agency too see here:
http://jerusalemstyle.com/blog/dropping-ie6-no-more-ie6-support-appeal-webmasters-revolution-20090714-38
This is an interesting article DAO. Here is a document that we developed to help users take to their companies. It discusses why businesses should offer their users an alternative to IE6.
http://mitto.com
Your Safe and Secure Online Password Manager
OMG! I’m working on a site for a client and I thought well lets check it in IE8. Result: Loads of script conflicts (such as PNG Alpha transparency in combination with jQuery opacity statements) and heaps of display problems. I’ve tried to look for a png fix such as the ones for IE6 and came to the conclusion…. THERE IS NOT ONE!!!!!
AND NOW COMES IT!!!!.
I’ve checked all the sites that I made over the last 2 years in IE8 and I was shocked to see that they all have major issues regarding usability, display and functionality.
After cursing for an hour or so and wishing Bill Fucking Gates everything what we don’t want to have, I really don’t know how I’m going to explain my former clients that I need days and in some cases even, weeks, to solve all the issues and that they have to pay for me to do so while actually BILL FUCKING GATES have to pay me for that.
Seriously, I know that I as a web developer can’t ignore Internet Explorer, because there are still too many end users stuck with the shitiest browser on earth, but deep in my Firefox, Opera, Safari, Chrome, etc, HEARTH… I WISH I COULD!
@Ralph
You can use the alpha transparency filter in your style sheet to fix your png problem in IE. Not sure if I can paste the style code here, but I will try:
[code]
* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
[/code]
Make sure to give your png images a position or they will not work as links.
THIS did not work at all for me…
Don’t forget to change the path to your images. The code goes into the stylesheet. You will need a transparent GIF file. Do not put the [code] and [/code] in your stylesheet. They were meant to display this text as code, but didn’t work as I thought. You can to my site and see it in action. This code works good in IE7 and IE8. IE6 might be another story. Sorry.
Haha, thanks for sharing this, really nice!