advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

jonhenshaw on 11/08/07


Tagged

css ie image png transparency internet explorer transparent


Versions (?)


Who likes this?

11 people have marked this snippet as a favorite

jonhenshaw
vali29
SpinZ
basicmagic
heinz1959
scyfox
Wiederkehr
senixon
davidtaubmann
rareyman
sherakama


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.

Plain TextExpand 
  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]--

Report this snippet 

Comments

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

GREAT!!!

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

MAN!!!! JUST GREAT!!!! BETTER THAT ANYTHING ELSE!!! THANKS!!!

You need to login to post a comment.