Monday, June 22, 2009

Transparent PNG's and IE 6

IE 6 doesn't have native support for the Alpha channel that make PNG's transparent.  This can make PNG's look very ugly in IE6 when they are transparent.

Asking around the office today, I got a cool solution that uses IE's proprietary behavior css attribute to call a Compiled HTML document that applies filters to the PNG to behave correctly.

It's pretty easy to install:

How To Use

Follow these simple steps to add this to your page:

  1. Copy and paste iepngfix.htc and blank.gif into your website folder.
  2. Copy and paste this into your website's CSS or HTML:
    <style type="text/css">
    img, div { behavior: url(iepngfix.htc) }
    </style>
    That CSS selector must include the tags/elements on which you want PNG support -- basically, give it a comma-separated list of tags you use. It must also include the correct path to the .HTC relative to the HTML document location (not relative to the CSS document!). For instance, yours may look like this:
    <style type="text/css">
    img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
    </style>
  3. If your site uses subfolders, open the .HTC file in a text editor like Windows Notepad and change the blankImg variable to include a correct path to blank.gif like so:
    var blankImg = '/images/blank.gif';
    Again the path is relative to the HTML file. Otherwise, you will see a "broken image" graphic!

# Monday, June 22 2009 at 12:07 PM | Comments [2]
Tags:  |  | 
Monday, June 22, 2009 1:20:01 PM (Eastern Standard Time, UTC-05:00)
Be careful with this. I recently ran into a problem with this removing the hover state of links that use PNGs.

From the demo page (http://www.twinhelix.com/css/iepngfix/demo/): "A:HOVER transparent images are not supported out of the box. If you want this functionality, I recommend you download the excellent Whatever:hover script. This script will then enable :hover PNG background changes on all page elements when both are applied to the page."

Just a heads up.
Zack
Monday, June 22, 2009 1:32:53 PM (Eastern Standard Time, UTC-05:00)
@zack - Thanks for the heads up. I did see that but I only needed it to display static images with no interactive features.
Ralph Whitbeck
Comments are closed.

Blog Posts by:

Currently Viewable:

The Official jQuery Podcast

with Ralph Whitbeck & Rey Bango

You can subscribe to the show in iTunes or via the raw RSS feed

My Twitter Updates

View Twitter Page