advanced code snippet search

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.

Expand | Embed | Plain Text 
  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  

You need to login to post a comment.