Png Fix

From Wiki.TheWomo

Jump to: navigation, search

Contents

The Problem

You may come across the common problem of png transparencies not rendering properly on Internet Explorer 6 (We hate it too!). Eventually we will have to stop fixing this issue as most users will migrate to browsers that support png & opacity. But for now, this is an issue that needs to be fixed for all websites (especially in India as we still have a strong IE6 user base of around 60%)

Note: As far as possible, avoid using png's for images with no transparencies. Jpeg's do a better job at file size & can provide the same quality. For minimal transparency levels, try using Gif's.

The Solution

We've tried and tested multiple options to fix this but the two best are:

  • IE PNG Fix (iepngfix.htc) : Easy to setup & works perfectly. Demo | Visit
  • jquery.pngFix.js - For websites that already incorporate jQuery(all our sites do!), make the ugly grey regions disappear intro transparencies using

powerful jQuery selectors - Demo / Visit

Sample usage of jquery.pngFix.js: 

<head> 
... 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $("img#logo").pngFix();
    }); 
</script> 
... 
</head>

Example Websites

Related articles

Retrieved from "http://wiki.thewomo.com/Png_Fix"
Personal tools