Advanced Search

Return to Snippet

Revision: 10831
at March 9, 2010 09:13 by wizard04
Updated Code 
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.

*********************************************************
DD_belatedPNG
http://www.dillerdesign.com/experiment/DD_belatedPNG/

Download the DD_belatedPNG javascript file
Edit the selector in the call to fix()

*** In HTML: ***

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.7a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix("img, div");</script>
<![endif]-->


*********************************************************
IE PNG Alpha Fix
http://www.twinhelix.com/css/iepngfix/

Download iepngfix.htc and blank.gif
Edit the path to blank.gif in iepngfix.htc
Edit the selector in the inline CSS

*** In HTML: ***

<!--[if IE 6]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
<![endif]-->


*********************************************************
IE PNG FIX. CSS Solution
http://snipplr.com/view/4637ie-png-fix-css-solution/
This is basically the same as above, but put directly into the stylesheet instead of an .htc file

Download transparent.gif
Edit the selector in the inline CSS

*** In HTML: ***

<!--[if IE 6]>
<style type="text/css">
img, div {
    azimuth: expression(
        this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "/images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
        
    );
}
</style>
<![endif]-->

Revision: 10830
at January 15, 2009 13:16 by wizard04
Initial Code 
*********************************************************
DD_belatedPNG
http://www.dillerdesign.com/experiment/DD_belatedPNG/

Download the DD_belatedPNG javascript file
Edit the selector in the call to fix()

*** In HTML: ***

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.7a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix("img, div");</script>
<![endif]-->


*********************************************************
IE PNG Alpha Fix
http://www.twinhelix.com/css/iepngfix/

Download iepngfix.htc and blank.gif
Edit the path to blank.gif in iepngfix.htc
Edit the selector in the inline CSS

*** In HTML: ***

<!--[if IE 6]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
<![endif]-->


*********************************************************
IE PNG FIX. CSS Solution
http://snipplr.com/view/4637ie-png-fix-css-solution/
This is basically the same as above, but put directly into the stylesheet instead of an .htc file

Download transparent.gif
Edit the selector in the inline CSS

*** In HTML: ***

<!--[if IE 6]>
<style type="text/css">
img, div {
    azimuth: expression(
        this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "/images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
        
    );
}
</style>
<![endif]-->
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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&mdash;try them out to find one that works for your web page.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Good IE6 PNG Fixes

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
ie, ie6

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript