HELP! Transparent PNG's in IE look awful

[jawanda]

Hey designers,

Can anyone give me a heads up about why these certain text-based transparent pngs are looking great in every browser except for IE (and it's IE 8 NO compatibility mode for that matter). I've trieds dozens of different save settings from Photoshop, and as you can see the Icon at the top which is also a transparent png looks fine, but I can't for the life of me figure out why this text is ugly around the edges. Even tried recreating the graphic in a different program (Flash) and got similarly crappy results. Also tried a different (but similar) font, similar results.

In all my years, I've never seen this exact problem before. Maybe I am just brain-dead from starting at a screen for 20 hours. Anyone help a guy out with some wisdom?

See image .

THANKS!

-Phil

[MetaMan]

The div the image on top most likely needs a matching background put in. Along those lines. I have seen it happen and IE will literally add extra pixels to an area.

I was never able to figure out exactly why but that is my best guess that i have found.

[Vendzilla]

doesn't the dithering setting have something to do with it?

[Harmon]

Many years ago when the first versions of Firefox came out and were already supporting transparency with PNG images, IE was still behind in the game (what's new?). It wasn't until IE7 (correct me if I am wrong) that transparency was finally (somewhat) supported in IE.

Today we are on IE8, and it is often claimed that IE now fully supports alpha transparency with PNGs. At first glance, with certain generic images, this may seem like the case, but the more you use PNGs, the more you will realize, IE still hasn't got it right.

The two images that are included show how IE8 (8.0.7600.16385 - to be exact) and Chrome5 (5.0.375.99 - to be exact) render alpha transparency in PNG images when partial opacity is applied using CSS.

Notice how IE still doesn't do this properly, by creating a solid, unappealing matte around the edges of the image. In Chrome you can see how the images are perfectly blended to their respective backgrounds without any such solid and rough edges.

While I only used Chrome for the sake of comparison, the reality is that Firefox, Opera and Safari also do render this properly.

So regardless of what Microsoft wants to tell us, or what many misinformed webdevelopers would like to believe, IE8 *still* has issues with alpha-transparency with PNG images, and as such, I don't think it's fitting to say that IE supports transparency with PNGs quite yet, since it all falls apart when you apply opacity to the images in CSS.

In closing: what gives Microsoft? I feel like I've been waiting for complete PNG support for more than 5 years now, and almost the entire time I keep getting told "it's all already there", but that is a load of hogwash, and these comparison shots demonstrate that very clearly.

Source: http://www.sikosoft.com/item/ies_so-...nt_png_support

[jawanda]

Originally Posted by MetaMan

The div the image on top most likely needs a matching background put in. Along those lines. I have seen it happen and IE will literally add extra pixels to an area.

I was never able to figure out exactly why but that is my best guess that i have found.

Thanks for the comment MetaMan. Unfortunately, this png is used as the bg for a div which moves around the page and appears in front of a few different divs in its' various states, so changing the bg of the div behind it is not feasible.

[jawanda]

Originally Posted by Vendzilla

doesn't the dithering setting have something to do with it?

dithering definitely affects the over all quality of the edges, but in this case it's not the problem. I have tried all of the different dithering options and they all have similar artifacts around the edges when viewed in IE. If the image were looking jagged in all browsers, that would probably be a dithering issue.

[TheDoc]

Here's how I deal with transparent crap in ie... Make PNG's Transparent in Internet Explorer 4th tip down. I've never seen your issue come up doing it this way, it works in all modern ie's as well.

[Davy]

iepngfix.htc

[Vendzilla]

Originally Posted by TheDoc

Here's how I deal with transparent crap in ie... Make PNG's Transparent in Internet Explorer 4th tip down. I've never seen your issue come up doing it this way, it works in all modern ie's as well.

Thanx TheDoc, been looking for something like this. Something I'm trying to do it will work perfectly for

[jawanda]

Thanks for all the replies, guys.

SOLUTION:

I finally got it working, but the suggested fixes didn't quit do it because they all implement AlphaImageLoader which just replicates the same problem IE8 is creating all on its own.

The solution I finally got to work was to use a script called DD_belatedPNG ( http://www.dillerdesign.com/experiment/DD_belatedPNG/ )which uses Microsoft VML to fix the pngs (and allows fixing on a per-element basis, which is what I wanted).

Then I had to use a <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > to force IE8 to emulate IE7 and thus trigger the script.

With that combination, my f'd up PNGs are finally looking as good as they should in IE8!

Thanks again for the comments.

-Phil

[Jakez]

Microsoft deserves to go bankrupt. It's so fucking unacceptable how much their browser is lacking and behind everything else.

[bns666]

ie png fix ftw

[Barry-xlovecam]

<!--[if IE]>
Special instructions for IE here
<![endif]-->

[HomerSimpson]

Originally Posted by bns666

ie png fix ftw

yes, if you use jquery you can use this one
http://plugins.jquery.com/project/iepngfix

[jawanda]

Originally Posted by HomerSimpson

yes, if you use jquery you can use this one
http://plugins.jquery.com/project/iepngfix

Nah, that wouldn't work for my specific problem, still relies on AlphaImageLoader. In fact, I just clicked on documentation for that plugin and the author of it even recommends that you use DD_BelatedPNG (which is what I ended up using) instead of his plugin.

That plugin will do the trick if you're just worried about ie 5/6 displaying transparency at all, but it won't necessarily be gorgeous 100% of the time.

-P

[DateDoc]

Someone needs to code this...
if IE force download of chrome, open page in chrome! ;)

[webboy21]

never had this problem in IE with transparent png's....looks almost like you used an 8 bit PNG?

[jawanda]

Originally Posted by webboy21

never had this problem in IE with transparent png's....looks almost like you used an 8 bit PNG?

Nope, 24 bit.

I found out the problem is because I am animating the opacity value of these pngs.

There's a really great page about this specific problem with the solution that I used:

http://www.mezzoblue.com/archives/20.../ie8_still_fa/

Here's an exert from the article:

"It seems that IE?s implementation of PNGs with alpha transparency is still buggy or incomplete in some way. When you place a PNG with alpha on a static page, you?ll never be the wiser. It?s when you adjust the opacity of that PNG that you run into problems. Take the following example:"

[blackmonsters]

Originally Posted by Jakez

Microsoft deserves to go bankrupt. It's so fucking unacceptable how much their browser is lacking and behind everything else.

I use firefox the most but I sometimes have to use IE because firefox will not
work correctly. It's usually flash or windows media player that causes problems
for me in FF. Maybe it's my computer also, but changing to IE gets me passed the
problem.

My web stats show 41% using IE and 22% using FF.

Safari = 23%.

[potter]

Love all the people throwing out the pngfix shit which is specifically for IE6. I swear no one reads anything anymore.