Monday, June 22, 2009

Create a PNG transparency work in IE 6

png-alpha-fix-1

Let’s take a look at the difference of logo.png (with transparency) above on Mozilla Firefox and Internet Explorer 6

If you inserting your logo in PNG format with transparancy will leave you with a white background when saw in Internet Explorer 5 or 6. It makes your logo looks not good and this is really the last thing any web designer would want on their website. Don't worry about that, I'll give you a solution on how to solve this.

Solution

  1. You must download file iepngfix.zip
    Unziped file and than inside iepngfix folder you can see two file blank.gif and iepngfix.htc
    Upload two file above to your server and put into root directory.

  2. Into your CSS file add selector on tags/element which you want PNG transparency appear. Example:
    <html>
    <head>
    <style type="text/css">
    img.logo { behavior: url(iepngfix.htc) }
    </style>
    </head>
    <body>
    <img class="logo" src="http://gusdwi.info/images/my-logo.png"/>
    </body>
    </html>
  3. For more detail source, see on http://www.twinhelix.com/css/iepngfix/demo/