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.


Copy this code and paste it in your HTML
  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. }
  11.  
  12.  
  13. ________
  14. ________
  15. Also consider adding this conditional comment on your HTML page
  16. ________
  17. ________
  18.  
  19. <!--[if lte IE 6]>
  20. <link rel="stylesheet" type="text/css" href="png_fix.css" />
  21. <![endif]--

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.