leonardoPicado.com’s blog

Unlike most people I won’t go on with a post of how I just created the ultimate method for using transparencies on 24bits PNGs in IE6 I will tell you what works for me:

The problem
IE6 does not properly handle transparencies on PNGs at 24bits, it usually shows a gray/turquoise area where the transparency should go which makes them pretty much obsolete in Web Development if they are not used correctly.

The Solution
There are many ways to go around this problem, last night while working for the brand new Fuel Economy Sitelet for Buick I needed to have a transparent PNG sitting on the page so basically it went a little bit like these:
The CSS

#pngContainer{
	width:345px;
	height:53px;
	background:url('../button.png') top left no-repeat;
}
 
* html #pngContainer{
    background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/root/button.png', sizingMethod='crop');
}

The HTML

  <div id="pngContainer">
    <p>Content goes here</p>
  </div>

So basically what we are doing is setting the PNG as the background of this container and then using a hack for IE6 removing it and then setting it again with the proprietary filter property, sounds simple right? Well it is, just like that you will have a transparent PNG as the background of your container :), full 24bits madness all over you!

Okay so we got that out of the way, but what happens when you NEED a 24 bits PNG to be in a LINK tag?, well for some reason using the good old display:block won’t work in IE6 so there is also a way around that, let’s see it:
The CSS

#pngContainer a {
	display:block;
	width:345px;
	height:53px;
	cursor:hand;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/root/button.png');
}
 
#pngContainer a img {
	width:345px;
	height:53px;
	cursor:hand;
	_filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

The HTML

<div id="pngContainer">
   <a href="#yourLinkWillGoHere">
      <img src="../images/imageRouteGoesHere.png" />
   </a>
</div>

So basically what we are doing here is relying again on the Microsoft Alpha Loader filter and the Opacity filter, so basically we are putting the image as background for our container using the underscore hack for IE6 only and then inserting it into the a tag for the rest of browsers and then, the final step is to hide it from IE6 using the Opacity filter :), sounds like fun right?

Well it is no fun at all, but it works, so there you go, have a nice weekend.

Important you have to know that the paths used in the filter must be absolute to where the HTML is.

Tags: 24bits, buick, filter, fuel economy, hack, ie6, microsoft, png, transparent, web development