advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

wizard04 on 01/15/09


Tagged

fix ie png ie6


Versions (?)


Good IE6 PNG Fixes

Published in: JavaScript 

There are several fixes out there that work in different ways, but none of them are perfect (especially regarding background images). Here's a list of the ones I've found that work reasonably well—try them out to find one that works for your web page.

Embed | Plain TextExpand 
  1. *********************************************************
  2. DD_belatedPNG
  3. http://www.dillerdesign.com/experiment/DD_belatedPNG/
  4.  
  5. Download the DD_belatedPNG javascript file
  6. Edit the selector in the call to fix()
  7.  
  8. *** In HTML: ***
  9.  
  10. <!--[if IE 6]>
  11. <script type="text/javascript" src="DD_belatedPNG_0.0.7a.js"></script>
  12. <script type="text/javascript">DD_belatedPNG.fix("img, div");</script>
  13. <![endif]-->
  14.  
  15.  
  16. *********************************************************
  17. IE PNG Alpha Fix
  18. http://www.twinhelix.com/css/iepngfix/
  19.  
  20. Download iepngfix.htc and blank.gif
  21. Edit the path to blank.gif in iepngfix.htc
  22. Edit the selector in the inline CSS
  23.  
  24. *** In HTML: ***
  25.  
  26. <!--[if IE 6]>
  27. <style type="text/css">
  28. img, div { behavior: url(iepngfix.htc) }
  29. </style>
  30. <![endif]-->
  31.  
  32.  
  33. *********************************************************
  34. IE PNG FIX. CSS Solution
  35. http://snipplr.com/view/4637ie-png-fix-css-solution/
  36. This is basically the same as above, but put directly into the stylesheet instead of an .htc file
  37.  
  38. Download transparent.gif
  39. Edit the selector in the inline CSS
  40.  
  41. *** In HTML: ***
  42.  
  43. <!--[if IE 6]>
  44. <style type="text/css">
  45. img, div {
  46.     azimuth: expression(
  47.         this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
  48.         this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
  49.         this.src = "/images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
  50.         this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
  51.         this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
  52.  
  53.     );
  54. }
  55. </style>
  56. <![endif]-->

Report this snippet 

You need to login to post a comment.