Every web developer knows that develop cross-browsers web applications is a real pain in the ass. To complicate the things a little bit, the change from IE6 to IE7 bring many differences that turn the develop process harder.
One key limitation in the old Internet Explorer 6 (IE6) is the Portable Network graphics (PNG) transparency problem. In this version of IE, pages that contain PNG images with transparent background are shown wrong. The background of the image is shown gray rather than transparent.
To solve this problem Microsoft recommends that web developers use the AlphaImageLoader filter. This is specific IE CSS filter that can be used with images to show the PNG transparency. The filter can be used as shown below:
<html>
<head>Show PNG transparency in IE6</head>
<body style=”background-color:#FFFFFF;”>
<!– Div that handles the transparent image –>
<div style=”height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
src=’image.png’, sizingMethod=scale);” >
</div>
</body>
</html>
AlphaImageLoader has two parameters, the src and the sizingMethod. The first one is used to set the source image file to be filtered and the second one is used to set the sizing behavior that the object and the image have. The sizingMethod can take three values:
crop – Clips the image to fit the dimensions of the object;
image – Default. The object fits the dimensions of the image;
scale – The images changes its size to fill the object;
This CSS filter can be used as an object in JavaScript. This way, there is another property called enabled to set or disable the filter.
Form more information about AlphaImageLoader filter check MSDN website.
hi great site thx
Thank you for your post. It’s good to know that you like it.
I forgot to explain something that is very important when using this work around. How can we make this work both in Internet Explorer and FireFox? We can do it by two different ways.
We can use Conditional Comments to select put some CSS only in IE6 implementing the work around. This is a feature only from the Internet Explorer browser.
Remember that in the normal CSS you must put a normal CSS background. It must be before the IR6 hack.
If you are worried about the validation, you don’t need to be, because Conditional Comments validate well. The validators like W3C will think that it’s a normal comment.
Another way uses only CSS and try a different approach. Create a class to be read from IE and another one only from another browsers, because the IE browsers ignore classes with attributes, like following:
Now I think you won’t have doubts.