Remote Synthesis
Search my blog:
Viewing By Entry / Main
Apr 27, 2006

IE PNG Fix with Background Support

I have commented on this topic many times before, and it always seems like there is a new IE PNG fix out, but IE PNG Alpha Fix v1.0 RC4 is exciting for two reasons:

  1. It automatically supports png background transparencies. My current solution is Sleight and while it benefits from a lack of lag time, it does not support background transparencies.
  2. It requires 1 line of CSS to implement. Yes, you heard that right.

Here is example code taken from the source of their demo page:

<style type="text/css"> <P>
/* USAGE: All you have to do is include this one line in your CSS file, with the tag names to which you want the script applied: */ <P>
img, div { behavior: url(iepngfix.htc) } <P>
/* Alternatively, you can specify that this will apply to all tags like so: * { behavior: url(iepngfix.htc) } */ <P>
</style>

Once you strip out the comments you will notice we are down to a single line of CSS that is IE specific. That's it. This did appear to have a slight lag time (unlike sleight), but definitely nothing prohibitive. Definitely something I will be testing out. Thanks to the Wired Monkey Bites blog (who also mention a solution for PNG image maps as well)

Comments
Mike Rankin
If this isn't fixed with IE7, I'm probably not going to bother to upgrade.


Brian Rinaldi
My understanding is that it will be...though I have not tested the IE7 beta.


Peter Boughton
Unfortunately it doesn't appear to support repeatable backgrounds. :(


Dave
I believe this has similar limitations to other solutions: * Can't help IE versions prior to 5.5 * Users can't right-click-save processed PNG images, they'll save the blank GIF file if they try that. In some cases this might be a feature, not a bug... * It's most reliable on elements with non-'auto' dimensions set. So, give images and other elements width/height values; '100%', '10em' and '200px' and so on are all OK. * Background PNG images can't be tiled. This is a limitation of the IE filter. * Similarly, padding and borders don't indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar. * There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.


asdf
"background-position" doesn't work either with this one. I tried positioning a small background image to the bottom right corner and it stayed at the top left one.


Chris
It does not work for me (IE 6) ....


Ross
I found a similar solution somewhere else, which works great. Regarding the comment above about the short flicker, I notice that if you include the CSS directly on a page that you dont get it, if it's in an external css file then you'll get the flicker. Thought it might help!


imran
please why this script is not supporting repeatable backgrounds. please give me any tip to overcome this problem please help me!!!


Write your comment



(it will not be displayed)