Transparency in IE6 – no matter how you do it, or how you tackle it, its always the most annoying part of developing/designing a website. However, getting IE6 to work with transparent PNG backgrounds in CSS is relatively easy, the following code does the trick for most things…
background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='/path/to/image.png');
But when it comes to physical images within the HTML itself, it can become a little more tricky. Particularly if those images have specific styles on them such as margin’s, position:absolute, and so-forth. However, after a little searching around and some “hacking”, I found this little chunk of code. I’ve used it for about an hour and checked various things out with it and it looks like it works like a treat!
img, .pngfix { azimuth: expression(
       this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
       this.src = "/img/x.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
); }
Put that in your IE6 specific stylesheet, along with an image named x.gif which is transparent, and you’re done 