Throughout coding this website, the amount of IE-specific CSS hacks I’ve had to resort to has been startling. IE’s (mis)handling of simple margins and padding attributes while adding said attributes in places in which they were not defined is embarrassing. Internet Explorer is a joke.
Yesterday’s Freakanalytics disclosed that 25% of my site visitors still use IE. I figured to use IE’s weaknesses to my advantage to add a site ribbon that only IE users will see, urging them to get Firefox. This is what it looks like.
Surprisingly, when deliberately trying to work with IE’s weaknesses instead of against them, this turned out to be rather easy. Here’s what I did:
Start off with a ribbon image or some other image. Mine says “Internet Explorer users, try Mozilla Firefox”, but you can use any text you want. Download the PSD here if you’d like to see how I created mine (public domain). Upload the image to your images folder.
Next, insert the following hack into your CSS file or header:
* html .IE {
float:right;
position:absolute;
top:0px;
right:0px;
background:none;
width:172px;
height:176px;
cursor:pointer;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='http://www.YOURDOMAIN.com/images/ietag.png', sizingMethod='crop');
}
The “* html” bit at the beginning is somewhat of a controversial hack, but it works in order to make sure that browsers other than IE ignore this styling, since they don’t support this command. The “filter:progid:” bit at the bottom is an IE tweak to make sure that IE6 supports the PNG transparency of the image. Make sure to replace the URL in the code to the path of your image. Please make sure that the last two lines of this code (“filter:progid” and “(src”) do not break as above – I needed to break the javascript into two lines so it wouldn’t break my blog in this post.
Next, insert the following code within your page’s body tags. I recommend putting it straight after the body tag opens:
<div class="IE" onclick="window.open('http://www.getfirefox.com');"></div>
That’s it! I’m sure there are alternative ways to do this, but as I’ve said before: “I’m a designer, Jim, not a developer!”
Please post any alternative methods in the comments.
Edit: Aleks recommends using this method instead.