WordPress: Fixing PNG transparency issues in IE

Tuesday, May 30, 2006

technology01.png I’m using WordPressto blog this. I usually prefer to use PNG images over GIF for their ability to have variable alpha-channel transparency that makes them look good over any background. PNGs are a much greater improvement over the old GIF’s single-colour transparency mask.
The issue is that while 8-bit PNG are similar to GIF images and display well in Internet Explorer 5.5 and 6, full-colour PNG with transparency do not: they are drawn with an opaque grey or coloured background where they should be transparent.

This has been a major pain for web designers trying to make their site look nice and a lot of hacks have been invented to get around the problem.

The one I like best is using DHTM Behaviors, a Microsoft-only CSS extension that allows a programmer to extend the IE’s capabilities using JavaScript.

The behavior is loaded using a directive in your normal style sheet. Since it’s an IE-specific extension, it’s safely ignored by all other browsers. Similarly, you don’t need to change your HTML at all.
All that’s required is that you download a 1×1 pixel blank GIF image, the PNGbehavior script and add a couple of lines to the style sheet used in your site.

I’ve described a specific implementation for PmWiki before, this one is targeted to WordPress users.

  • Get the blank.gif and pngbehavior.htc files and save them in your WordPress’ /wp-content/themes/ folder.
  • Modify your theme’s stylesheet (for the default WordPress theme, it’s in /wp-content/themes/default/style.css) by adding the following anywhere in its file:
/* Fix for PNG alpha channel display in IE6 */
img {
  behavior: url("/wp-content/themes/pngbehavior.htc");
}

That’s all!

If you’re saving the behavior file or the blank GIF in another location, you will have to change the paths in the pngbehavior.htc file.

Make sure that the PNG images in your pages have their proper width and height set, otherwise if these attributes are missing from the <img> tag the images will appear as single pixel dots in Internet Explorer.

Note that I’ve modified the behavior file to make sure it can be used with the excellent LightBox JS 2.0 image display overlay script.

The original PNG hack comes from the impressive WebFX website.

Resources

Modification on 30NOV2006

Corrected the pngbehavior script to only work in IE5.5 and IE6 as IE7 now correctly displays transparent PNG images.

Modification on 17FEB2007

Another reference to a slightly different implementation: http://homepage.ntlworld.com/bobosola/index.htm

Entry Filed under  :  Web Design

11 Comments Add your own

  • 1. Herbert Spencer  |  July 14th, 2006 at 12:44 am

    Hi, your post was just what I was looking for. Thanks a lot!

  • 2. Vikingprincess  |  November 23rd, 2006 at 8:29 pm

    BIG THANK YOU! I had been struggling on and off for days with getting a transparent png fix for IE6 to work.

    I couldn’t get it to work until I read your page. It is particularly relevant for people who use Wordpress.

    Thanks again!

  • 3. Samuel Clarke  |  February 5th, 2007 at 6:03 am

    Thanks so much for that! This has saved me a lot of work. Hopefully in the next few years the rest of the world upgrade to more modern browsers - Safari, Firefox, IE7 (in that order). But for now this work around is great!

  • 4. Andy  |  May 31st, 2007 at 3:30 am

    Hi. Thanks for writing and developing this. I’ve used png IE fixes before with flat HTML sites, works great, but I just can’t seem to get Wordpress to accept the fixes. I hoped this was the answer but I just can’t get this to work either. Followed and didn’t change your instructions.

    My only thought is perhaps because haven’t got Wordpress installed in the URL root? It’s a dev site hosted a few levels deep. Any ideas?

    Thanks again.

  • 5. Renaud  |  May 31st, 2007 at 8:03 am

    Hi Andy, It’s true that I have supposed that WordPress was installed at the root of the website, so in your case, my guess is that you probably have a path issue. One thing I do not mention in the article is that you may also have to edit the path to the blank.gif inside the pngbehavior.htc file; you will probably want to update line 29 : var blankSrc = "/wp-content/themes/blank.gif"; to whatever path to blank.gif. Let me know if it worked.

  • 6. Razn8  |  September 13th, 2007 at 10:13 am

    I’ve followed the instructions outlined in your article, but I can’t get it to work in ie6.

    I’m using WordPress 2.2 and K2

  • 7. Kevin  |  September 27th, 2007 at 3:39 am

    I simplified the process and created a simple plugin that should work out of the box. You can find it here:

    http://www.mukei.org/8/ie-png-transparency-fix

    It’s the same fix this article is describing except that it automatically adds the necessary HTML code to any template that will be used. No need to modify individual templates.

  • 8. Mark Abucayon  |  December 9th, 2007 at 1:56 pm

    This is nice- It saves my day.

  • 9. Niall Ridge  |  February 20th, 2008 at 5:09 pm

    Flipping awesome! I found the pngbehaviour script but wasn’t sure where it had to live for wordpress. Thanks!

  • 10. Krembo99  |  May 13th, 2008 at 3:34 pm

    Shouldn’t we use conditional comments here ?

    <!--[if IE 6]&gt;--> Css here

    or

    <!--[if lte IE 5.5]&gt;--> Css Here

    Otherwise it would just overload browsers who does not really need that fix .

  • 11. Renaud  |  May 13th, 2008 at 5:21 pm

    To Krembo99: it may be a good solution to put the CSS trick in the HTML header directly between these conditional comments. Whichever way you do it wouldn’t matter much in term of performance: Behaviors are a IE-only extension and are totally ignored by other browsers. Just use the way that makes most sense to you and your site structure.

    There have been some improvements made to the PNG behavior I use and I’ll post the detail soon.

Leave a Comment

hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed

Most Recent Posts

Categories

Links