Advanced Search

Good IE6 PNG Fixes

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.