Posted By

jonhenshaw on 11/08/07

Tagged

Versions (?)

Last Edited at 11/08/07 08:22am

Statistics

Viewed 3002 times

Favorited by 15 user(s)

Related snippets

CSS PNG Image Fix for IE

/ Published in: CSS

The selector portion of the CSS rule targets which XHTML tags/classes this rule will be applied to. At first glance, it looks like all img tags as well as all tags with a class of "png". Youâ€™ll notice the * html in front of both of these. Wait, there is no â€œanytagâ€ preceding the html tag, so this wonâ€™t get applied! True. For all non-crappy (that is a pro term by the way) browsers, this rule wonâ€™t get applied. However, since IE6 is a pile, it thinks that there is a tag before the html tag, so it will apply this rule. Great! Now IE6 is the only browser that will use this rule.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

* html img,
* html .png{
    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 = "/style/images/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
    );
}
 
 
________
________
Also consider adding this conditional comment on your HTML page
________
________
 
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]--