Using CSS to create cross-platform compatible transparent PNG's

One more piece I just added to my transparent PNG "toolkit" is a method of making transparent PNG's work as the background-image in a div, in Internet Explorer 6 and 5.5. (Versions of IE below 5.5 will not work with these techniques.) The second part of this trick is how to get hrefs and form elements inside the layer to be clickable.

For those of you without Internet Explorer to test things on, here's how the example page looks in IE with no transparency fix. Note the blue-gray background behind the shadow.
...and here's how the example page looks WITH the fix. Note that the blue-gray background behind the shadow is gone.

---

Basic Instructions:

1. Create an empty div but give it an id (for example: id="yourDiv").
   
2. Create a style that adds in a background image ("yourImage.png"), either in the head of your page or in an external style sheet, linked into your page.

   
   <style type="text/css">
   <!--
   DIV#yourDiv {
   	width:600px;
   	height:400px;
   	background-image: url(images/yourImage.png);
   	background-repeat: repeat-y;
   	position:absolute;
   	top: 82px;
   	left: 46px;
   	padding-left: 25px;
   }
   -->
   </style>
   

3. Add a conditional comment that sniffs for IE 6 and down in which case it uses an IE-only filter which displays the image transparently inside the div, between the div background (which will be reset to "none") and any content you want to put in the div. To do this, insert this in the head of your page, below the style shown above( or if you used an external style sheet, below the link to the external stylesheet):
   

   <!--[if lte IE 6]>
   <style>
   DIV#yourDiv
   {
    background-image: none;
    filter:
   progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/yourImage.png,
   sizingMethod='scale');
   }
   
   
   
   </style>
   
   <![endif]-->

The idea is that you are redefining the style for DIV#yourDiv, but only IE 6 and below will be able to see the new definition.

---

Fixing clickable elements within the div

There is one major problem with this technique: form elements and links within the div will not be clickable, unless the height of the background image tile is reduced to 1 pixel. Although Microsoft's spec clearly states that the AlphaImageLoader:

"Displays an image within the boundaries of the object and between the object background and content...."

this does not actually appear to be the case, when dealing with form elements. I have found that radio buttons sitting inside a div which has a transparent PNG displayed by the AlphaImageLoader show up fine, but are not active. So it is as if they have a transparent div sitting on top of them, and no amount of z-index fiddling will adjust this. This is the case even though usually form elements show up on top of all other layers since they are windowed elements, and are drawn separately.

The only way I have found to retain the functionality of links and form elements within the div is to reduce the height of the background image tile to 1 pixel. A very extensive discussion of this bug in IE's AlphaImageLoader is HERE (Search for Addendum: IE Link bug)

An example showing clickable form elements within a div styled using the AlphaImageLoader solution and a 1pixel high image is HERE