CSS PNG Image Fix for IE

 / Published in: CSS

URL: http://komodomedia.com/blog/index.php/2007/11/05/css-png-image-fix-for-ie/

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.

  1. * html img,
  2. * html .png{
  3. azimuth: expression(
  4.   this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
  5. this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
  6. this.src = "/style/images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
  7. this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
  8. this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
  9. );
  10. }
  13. ________
  14. ________
  15. Also consider adding this conditional comment on your HTML page
  16. ________
  17. ________
  19. <!--[if lte IE 6]>
  20. <link rel="stylesheet" type="text/css" href="png_fix.css" />
  21. <![endif]--

Report this snippet  


RSS Icon Subscribe to comments
Posted By: senixon on March 16, 2008

I've tried many IE-PNG solutions, and this is the first all-css solution that does both IMG tags and Background images that I came across. Works great!

Posted By: davidtaubmann on May 5, 2008


I just subscribed to let know 3 things about this code.... 1.- I've been looking for such a code for MONTHS already, a JS solution helped me but gave lots of trouble in time delays on the page displaying. 2.- THIS ONE WORKS GREAT, only request, the PNG should be placed in html, NOT in CSS url(). That way won't work. 3.- I got some error image above mi images because I never noticed a transparent.gif was needed, so I created it an located it, but you know what?? it works better with a transparent.png (8, NOT 24 ! ).

That's it! I'm changing all my PNG 24 based websites to this solution, Thanks!

Pal's, remember, just for HTML declared png's (not CSS).

Posted By: highlander82 on August 22, 2008


You need to login to post a comment.