Fix that png transparency for your blogger blog!

So I've finally solved that annoying PNG transparency bug in IE. Or rather, I found an availible solution that suited my specific needs.

I started off trying to use the pngbehavior.htc file (get it here) from Erik Arvidsson, of WebFX, which worked wonders with my main site, where I could place the file locally on my server.

This became a problem with my blogger blog, which resides hosted by blogger. There was no way for me to upload the pngbehavior.htc (am I wrong, anyone?) and trying to access the one uploaded on my server was apparently not allowed. Furthermore, since the script is called via a behavior statement in the css, I had no way to implement the script code inline in the blog's html edit mode.

But then, today, after searching more specifically for png bug within blogger, I came across the magic solution. It was a hallelujah moment! And this is where I found it. However, I don't know what this guy did, but the code can't be copied (unless you do what I eventually did, I viewed the source and copied it from there and them tidied it up a bit).

So, I will publish the code for all of you to enjoy:

<script type="text/javascript"><!--
if( (navigator.platform == 'Win32') &&
/MSIE (5\.5[6-9])/.test( navigator.userAgent ) )
{
for( var I, i = 0; i<document.images.length; i++ )
if( /\.png$/.test( (I = document.images[i]).src ) )
{
I.style.filter = 'progid:DXImageTransform.Microsoft' +
'.AlphaImageLoader(src="'+I.src+'",sizingMethod="scale")';
I.src = 'http://www.lysator.liu.se/internal-roxen-unit.gif';
}
}//--></script>

Just insert this code at the bottom of your page (but before the </html> tag) and you're all set!

If you're paranoid you might want to follow Johan's advice, and put the linked image (a blank gif) locally on your own server (of course changing the

I.src = 'http://www.lysator.liu.se/internal-roxen-unit.gif';

to your own path, such as I.src = 'your path here';)

I didn't, and neither need you to. If, for some reason, the one hosting the image (which looks to be the University in Linköping, Sweden judging from the domain) were to remove it, we'll all get our blue boxes back on our png's, and I will deal with that problem then.

So start using this script and make the wwworld a nicer place!