Fading a 24-bit transparent PNG in IE7
Categories:
HTML/ColdFusion, jQuery
Internet Explorer 7 has some issues with fading transparent PNGs. If you've gotten to the this page because you're seeing a black border where the transparent edges in your PNG are, then here are some tips for fixing the problem:
- Do not fade the element directly, but fade a parent container holding the PNG. This may mean you need to add a wrapper element to your code.
- Give the parent element a background color.
- Lastly, if you're still having problems, try give your parent element the old "zoom: 1" trick. Give the parent element a style declaration of "zoom: 1" (either via CSS or an inline style.) This will force IE to give the element hasLayout—which tends to fix all sorts of weird display issues in IE7.
The above tips will usually sort out any fading issues I'm having in IE7.
Dan
-
Feb 17, 2009
@
4:03 PM
6417 Views
Send
Print
Comments (17)
6417 Views
Send
Print
Comments (17)
Comments
@Daren:Other some slight interlacing artifacts when fading in/out the images in the center banner directly under the navigation, I'm not noticing any real differences between Firefox 3 and IE7. And the interlacing that is there I think more an issue with the images themselves and not so much with IE7.
Dan G. Switzer, II
-
Mar 3, 2009
@
9:39 AM
Permalink
Hi Dan ! On this site ( http://forum.briask.com/viewtopic.php?f=3&t=12... ), I posted a picture of the problem. I highlighted the problem with red circles. The forum uses iframes so you'll have to scroll down or click the image to see what I'm referring to.I did try applying the zoom: 1 to the div container but that didn't seem to work. Another site made reference to your comment as well ( http://www.optimalworks.net/blog/2008/web-developm... ). But, again, I think they're referring to applying filters to the whole image where I just want the semi-transparent shadows of the text to come through clean.
The site I intend to use it on ( w-p.biz/milestones ) is not running the module yet because of this problem. I appreciate your response.
@Daren:The problem you're showing in the screenshot is definitely along the lines of the issue I've seen in, but in IE7 I've only seen the issue when I've specifically set the opacity to something other than 100% (like when fading in/out an image.)
Did you try giving the parent element a specific background color?
Dan G. Switzer, II
-
Mar 3, 2009
@
11:43 AM
Permalink
Hey Dan,Thanks for the answers. I know you're busy with other things.
No, I have not tried background color changes since I use a background image. With images this simple, would it be better to just use a transparent GIF?
@Daren:You could use an 8-bit PNG as well--it's only 24-bit PNGs that have the issue.
My guess is if you just gave the parent DIV a background (setting a specific background image might work--I've only tried specifying a color) the problem would go away. I'd try setting it to a solid color first--just to see if that works.
Dan G. Switzer, II
-
Mar 4, 2009
@
7:36 AM
Permalink
Hi Dan, I got stuck on this error for days. Had it working in Firefox, Opera, Chome, everything except IE7. Zoom:1 fixed it. Thanx a lot for posting!
Hi all,I had the same problem with pngs, in my case it was a 1x1 px png. Changing the size to 2x2 px solved problems. :)Good Luck
Here's a test I made with AlphaImageLoader and fading 24bit png's in IE7. It shows that it's far from perfect. It works ok (barely) when the image has a steep fade but thats it.http://www.snutt.net/testzon/ie_alpha/
This is only one of the many things that annoy me about IE. Can't believe people still use it...
Thanks Dan,Adding a background-color to the img tag (unconventional), but it worked like a charm. I was fading the img tag, and replacing the src with JQuery for a simple gallery effect.
Tobin Lehman
-
May 7, 2009
@
2:33 PM
Permalink
Thank you!! I was so sure I was in for a long night of debugging now. Never seen anything this weird in IE before. FYI setting background directly on the img tag did it for me.
@eyestein & @tobin lehman:what background-color did you set it too? I need it to be transparent.
Jigga
-
Aug 4, 2009
@
1:54 PM
Permalink
For what it's worth, I tried doing a background color in the CSS and it didn't take. However when I put the CSS inline, on the DIV parent of the img tag, it worked superbulously. Perhaps this may help another in the future!
Setting background-color defeats the point transparency which renders the "fix" moot if there's not already a solid color behind the PNGs.And here I thought we were finally free of the IE PNG demons (with IE7)...
Scott B
-
Aug 28, 2009
@
2:38 PM
Permalink
Big thanks - I've been going round in circles trying to get a background transparent .png work in IE7. Added the Zoom: 1 declaration to the div and it worked just like that.
Don Weaver
-
Jan 31, 2010
@
3:32 PM
Permalink
I agree with Scott B ---> if I could set a solid color background or border I wouldn't be using a png-24. Tried the zoom: 1; on every possible element, didn't work.Conclusion --- IE sucks. Seems like a come to that conclusion alot.
Jeremy
-
Mar 5, 2010
@
12:55 AM
Permalink
I found this blog entry when googling IE7 PNG issues.
I addressed this issue in the following post on a different site: http://forum.briask.com/viewtopic.php?f=3&t=12... . The pictures I posted are indicative of the problem you describe as well. At least, that's what i think. Since I have already placed a semi-transparent shadow on the text in the PNG, do you think the zoom:1 fix would work?