PNG Transparency in Internet Explorer
I teach a Multimedia class at Plymouth State University. This week we were discussing the pros and cons on the use of PNGs. I mentioned that Internet Explorer versions 6 and lower fail to render the transparency of a PNG properly, placing white background in the transparency’s place. I also took the time to plug Firefox, mentioning that Firefox does it right!
Well, one of my students, Brendan Emery sent along this fix for PNG transparency in Internet Explorer, thus refuting my biggest con on PNG use! (honestly, I can’t think of any other cons)
[This is] a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. [...]
Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 (not yet released at the time of writing in January 2006) is reported to have fixed the issue entirely.
The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers - in fact it is treated as an HTML comment - thanks to IE’s conditional comments. This solution is therefore light, portable and non-invasive to other browsers.
Discuss This Article
|
|
13 Responses to “PNG Transparency in Internet Explorer”
-
Death_Tap
Posted: Mar 6th, 2006 at 5:46 pm1 -
SEO Articles
Posted: Aug 6th, 2006 at 8:00 pmReply to this comment.These Javascript fixes aren’t exactly ideal - and most solutions only fix img tags, not background pngs.
Bah, wish we could just ignore IE.2 -
TerrorBite
Posted: Sep 6th, 2006 at 1:04 amReply to this comment.…since when did backgrounds need transparency?
It’s not like there’s anything behind a background.
In that case, just convert to a non-transparent PNG.
Also, it’s not all transparent PNGs that are affected - only the ones with alpha transparency. The ones with index transparency (like transparent GIFs) are fine. Which sucks.
3 -
Trevor
Posted: Oct 10th, 2006 at 9:48 pmReply to this comment.TerrorBite:
Background images need transparency when they are applied to elements intended to be viewed on top of (in the z-index) another element, or another background, or whatever. I can think of a million different ways to use that.
4 -
Suj
Posted: Oct 13th, 2006 at 6:04 pmReply to this comment.Terrorbite, you talk rubbish :) If you have a container dv with a background image, then another over the top - with a transparent png background, you’ll have a nice opaque effect, uncovering slightly what’s beneath (the picture).
Thats why background images could make use of transparency.
5 -
JD
Posted: Dec 18th, 2006 at 1:00 pmReply to this comment.As a deisgner I wish that IE could be removed from every computer and replaced with Firefox. How come everyone else even open source handle PNG, but IE can’t find the time to fix it over the last 6 years.
6 -
SeoBlog
Posted: Jan 30th, 2007 at 11:37 amReply to this comment.Интересная статья ‘PNG-прозрачность в IE 5.5-6′: http://www.tigir.com/alpha_png.htm
7 -
Florin
Posted: Sep 14th, 2007 at 4:15 amReply to this comment.Hi,
Good fix, but how can I change it to support background png’s? I don’t need background-position or repeat-x(y), just
”
experimentation revealed I could traverse the Stylesheets collection and use the AlphaImageLoader trick to replace all background-image attributes containing PNGs
“8 -
stevo
Posted: Dec 27th, 2007 at 3:23 amReply to this comment.A very nice workaround. Thanks a lot
9 -
Andrew
Posted: Feb 22nd, 2008 at 8:24 amReply to this comment.I have this working but the final output is still looking different in IE6. Despite me setting a width and height in the img style it looks bigger in IE6 and doesn’t look as crisp as it does in Firefox/IE7.
Microsoft can go to hell!
10 -
CW
Posted: Feb 29th, 2008 at 6:59 amReply to this comment.I had the same result as Andrew, basically the “fix” could not be used because it distorts images.
11 -
ogłoszenia
Posted: Mar 2nd, 2008 at 7:55 amReply to this comment.Thanks a lot for this workaround!
12 -
Nero
Posted: Mar 18th, 2008 at 10:20 amReply to this comment.It doesn’t work for me. I need a transparent background which I set using CSS. Stupid IE.
13
You got pwned.
Don’t fail me!