I just came across the amazing rendering capabilities of Internet Explorer 6. I was trying to add a translucent icon to the page and a 32bit PNG was its only solution. I tried adding the image like this:

<img src="MY_ICON.PNG" alt="My Icon" />

Simple plain html … and here are the results I got in different browsers.

One workaround was to use 8bit PNG which gracefully degrades. But this was not graceful enough.

I knew Microsoft has a proprietary property made especially for Internet Explorer. Because they know that simply including the PNG image in HTML does not work with them so they have an alternative complex method for this. This method is called AlphaImageLoader and the property is filters. This method uses procedural surfaces. According to Microsoft:

Procedural surfaces are colored surfaces that display between the content of an object and the object’s background. Procedural surfaces define each pixel’s RGB color and alpha values dynamically. Only the procedure used to compute the surface is stored in memory. The content of an object with a procedural surface applied is not affected by the procedural surface.

I did not want to use filters as Yahoo UI experts discourage the usage of filters for exceptional performance. These filters slow down the rendering of your webpage. But I had to use it because I wanted to make my website cross browser compatible. So, now I had to use this code for IE6:

<div style="height:128px;
width:128px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='MY_IMAGE.png');">
</div>

When I tested this code in my application, my browser crashed. I thought this is usual Microsoft error. So, I tested this code again, and again and again. But this was unlike other Microsoft behaviors. This was quite consistent. The browser crashed each time I run this code. I investigated this problem and came to know that if you use filters within an iframe which is dynamically generated, your browser will crash. My application was displaying this translucent icon inside an iframe which was being generated dynamically by a JavaScript library. So, what is the solution to this problem? should I ask my application users to go and install this Hotfix for their browser before using my website? :s

I managed to use this without dynamically added iframe but Microsoft was still testing my problem solving skills. Now I had to add a link in this icon. Amazingly, you cannot select any text or click on any link in an element which has filter applies to it. Another … :s

<div style="height:128px;
width:128px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='MY_IMAGE.png');">
<a href="http://www.microsoft.com/">
This link does not work in IE6.
</a>
</div>

Solution to this problem was very easy. I just added position:relative to the styles of link. Link started working :d

<div style="height:128px;
width:128px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='MY_IMAGE.png');">
<a href="http://www.microsoft.com/" style="position:relative">
This link works in IE6.
</a>
</div>

But apply position only to the link. If you have applied position to the element having filter too, this will not work.

<div style="height:128px;
width:128px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='MY_IMAGE.png');
position:relative;">
<a href="http://www.microsoft.com/" style="position:relative">
This link doest not work in IE6.
</a>
</div>

The problem for a web designer is that almost 30% of the internet users still use IE6. So, we have to keep on finding hack way around like this.