Gabe Diaz

Easy Transparent PNG Fix for IE6

Gabe Diaz

•

•

As mentioned in my original Redesign, WordPress Powered post I used a lot PNG files for this layout.  PNG files can be found in my header, nav, post and comment sections as well as in my tweet duck.

Why did I choose PNG vs GIF?
GIF files will allow for a transparent background,  but PNG files will allow for transparent backgrounds as well as altered opacity values.

I use a simple black box with a lowered opacity level to around 20% saved as a PNG for the sections mentioned above.  If I were to save it as a GIF I would end up with a shade of grey colored box.

Why care about IE6 and the PNG Issue?
I use Firefox on my personal machine as well as my machine at work(Mac/PC respectively).  I have IE7 installed just to make sure everything looks fine, same with a Safari install on this very machine.  I love Firefox and I’m sure many of you do(especially if you are landing here from WeLoveWP) but the realization is that many people out there are still using IE6*.  A quick search brings up W3Browser Stats and for the month of June 2008 they report:

2008 IE7 IE6 IE5 FX Moz S O
June 27.% 26.5% 0.5% 41.0% 0.5% 2.6% 1.7%

26.5% market share is enough for me to fix the issue since I want everyone who visits to be able to see/experience the site the way I originally intended.

*To view your site in multiple IE versions and you are on a PC make sure to check out Tredosoft they offer a free program that lets you install IE6, IE5.5, IE5.01 and IE4.01.

The Fix
I am using the iepngfix V1.0 that can be downloaded at twinhelix.
In my case, I moved blank.gif and ieongfix.htc to a directory images/iefix on my web host.

Edit your site’s CSS file and include the line:
img{behavior: url(images/iefix/iepngfix.htc)}
Just make sure you use the correct path to where you uploaded the iepngfix.htc file

In your css just call out your class/id’s that are using transparent PNGs, just make sure they are comma seperated:
.tweet,h2, .post, img{behavior: url(images/iefix/iepngfix.htc)}

Lastly if you placed blank.gif in another directory than your HTC file, open the iepngfix.htc file in a text editor and the find the fist uncommented line and fix the path to blank.gif:
if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif’;

———
Note: Version 1 of IE PNG Alpha Fix has some limitations such as not working properly with background set to repeat but there is an Alpha Version 2 that deals with this issue.

share this:

like this:

8 responses to “Easy Transparent PNG Fix for IE6”

  1. Joe Avatar
    Joe

    Wow, didn’t realize IE6 still had that much of a hold on things, you’d think most would at least have upgraded to IE7.

    Thanks for the tip, will have to check it out!!

    Reply
  2. Kerry Webster Avatar
    Kerry Webster

    Nice article. Appreciate the tutorial on how to handle the ie6 png issue. There are several (1 or 2) plugins that try to deal with this but seem to be limited. It looks like the manual approach is the best.

    At worst when ie8 hits the browser landscape the ie6 percentages go down. At best, ie6 is obliterated and sent to the depths of hell where it belongs.

    Reply
    1. gabediaz Avatar
      gabediaz

      @Kerry Webster –

      “At worst when ie8 hits the browser landscape the ie6 percentages go down. At best, ie6 is obliterated and sent to the depths of hell where it belongs.”

      Haha, best line ever!

      BTW I just used the wp-coda on a project, but your orange one looks great as well!

      Reply
  3. Meg Avatar
    Meg

    Aha!! Thank you, this is a great fix that I never knew about!! I wish I had known about this earlier when I had to switch back to GIF because of IE issues!

    Reply
    1. gabediaz Avatar
      gabediaz

      @Meg –

      I know, it’s ridiculous having to fix things specifically for IE but at least this fix is easy to implement. Glad you can find it useful!

      Reply
  4. robin Avatar
    robin

    I can’t get it to work. I have tried changing the directories and moving links around but still not success. have followed the instructions to the letter without making images transparent – works find on IE7, FF and Saf.

    Can you help, please.

    Reply
  5. gabediaz Avatar
    gabediaz

    @robin –

    You need to edit your CSS to include:
    img{behavior: url(images/iefix/iepngfix.htc)}

    Make sure the path to your htc is correct and then you would add the class’/id’s using transparent png’s.

    .yourclass img{behavior: url(images/iefix/iepngfix.htc)}

    Reply
  6. robin Avatar
    robin

    I have tried what you have suggested and still can’t get it to work. have linked the entire css file to the page as well as giving the image a class link, but both wouldn’t work.

    @gabediaz –

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *