rss

PNG fix IE: CSS only

Category : CSS

In IE6, PNG images with transparency do not show their transparent regions, so you have to use some crazy IE6 proprietary filters.

I have used the css code snippet below in my projects to achieve PNG image transparency. Place it in a css file.

1
2
3
4
5
6
7
8
9
10
* <a class="zem_slink" title="HTML" rel="wikipedia" href="http://en.wikipedia.org/wiki/HTML">html</a> img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&amp;&amp;(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" &amp;&amp; this.src.toLowerCase().indexOf('.png')&gt;-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.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)
);
}

You can use conditional include for this hack code so that the good browsers do not see this.

Share

Amit Yadav is Stephen Fry proof thanks to caching by WP Super Cache