Smoke Signals

Thursday, January 06, 2005

IE Ping trickery

OK, pings are cool mostly because of their alpha effects. But IE doesn't support them. Well, here is a hack using css and some other voodoo.

First thing: Create an IE style append-er in your header - <!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" /><![endif]-->
That little snippet will check to see if you are using IE and load an alternative stylesheet in addition to the stylesheet that is being used already.

Next: Since you are only appending a stylesheet with the above code you will need to do some more trickery to make IE not load the .png. For instance <div id="myping"></div> having a style of #myping {background:url(myping.png);} will still show up in IE even with the alternate stylesheet. So in your main stylesheet do this: body>html #myping {background:url(myping.png);}. Now that will only show up in Mozilla. IE does not recognize the > which is still valid css BTW.

Finally: Now for the .png alpha MS Voodoo Mojo. Open up your ie.css if you have one, if you don't, create it. Add the following style: #myping { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myping.png',sizingMethod='scale'); } and viola, it shows the png with it's alpha channel.

Now I am not sure why you don't have to use the background element in the ie version but I do know it works.