PNG-24 transparency in IE

I was doing some reading on PNG-24 transparency in IE. You could use a CSS hack to fix all image tags on your page. An ugly hack for an ugly browser:

* html img {
  filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ this.src +"')");
  padding: expression(this.src = 'trans.gif');
}

This still doesn't fix the background images in your style sheet. Too bad that this is the location for decorative images.

Update: You don't want to replace all images on your page. The same hack with PNG check:

* html img {
  filter: expression(this.src.match(/\.png$/i) ? "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ this.src +"')" : this.style.filter);
  padding: expression(this.src = (this.style.filter.match(/\.png/i) ? "trans.gif" : this.src));
}

Update 2: Ok, after IE kept crashing after focusing an input field I decided that it would be better to write a few lines of Javascript. I could use Dean Edwards IE 7, but I only need transparent PNG's at the moment. It has been a fun hack though.

Tags:

• CSS
• PNG transparency
• Internet Explorer