CSS PNG image fix for stupid IE

Posted by Cătălin on Tue, 13 Jul 2010

CSS Conditional comments for IE are a perfect way of hiding this hacky code from the good browsers

CSS Conditional comments for IE are a perfect way of hiding this hacky code from the good browsers. Here is a way to bring in the CSS for only IE 6 and below:

< ! -- [if lte IE 6] >
< link rel="stylesheet" type="text / css" href="pngfix.css" / >
< ! [endif] -->

pngfix.css

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(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 = "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)
);
}

web

Articles & Code Snippets

CSS PNG image fix for stupid IE

Posted by Cătălin on Tue, 13 Jul 2010

CSS Conditional comments for IE are a perfect way of hiding this hacky code from the good browsers

pngfix.css

Archives

Articles & Snippets