2

I made a rotating image fader using Javascript and CSS to show images and unload them. I wanted to use transparent PNG's, I didn't expect or care if they looked good in IE 6, but IE 7 and 8 treated them with the same disrespect. Firefox and other modern browsers looked great.
Every picture with image.filter = alpha(opacity=xxx) in it looks like some of the transparency has some leftover noise, maybe from compression or something, no matter what I do to the picture, there's still something there.

I've done workarounds by placing JPG's on white background and using GIF's.
Also can someone tell me if this is actually a bug in IE?

Let me know if you need an example and I'll make one
chills42
  • 14,201
  • 3
  • 42
  • 77
Peter Turner
  • 11,199
  • 10
  • 68
  • 109

2 Answers2

1

You have to use 'finishopacity' with 'opacity' in order to get even opacity across the picture.

By the way, transparency doesn't work all that great in IE 6 either. I use Bob Osola's JavaScript fix for this, works great!

http://homepage.ntlworld.com/bobosola/

Chris
  • 4,852
  • 1
  • 22
  • 17
  • e.g., set them to the same value for even opacity. I don't know why. Apparently this only works in IE but I don't know much about that either. – Chris Sep 22 '08 at 04:49
  • Thanks I'd never heard of finishopacity before, I'll try it, but I know I've gotten my point across without it, maybe not as forcefully as IE demands I guess. – Peter Turner Sep 22 '08 at 04:53
  • http://msdn.microsoft.com/en-us/library/ms532910(VS.85).aspx explains all about the opacity filter. – Peter Turner Sep 28 '08 at 18:47
1

I had this same issue -- all the IEs would fail, but Firefox and all other browsers would not have problems.

The way I fixed it was to open up the PNG in Gimp, choose the Fuzzy Select Tool, set the threshold to 150%, check Antialiasing, uncheck Feather Edges, check Select Transparent Areas. Next, I clicked on the transparent areas -- all the ones I could find on the image and clicked the Delete key (to mean "Clear"). Then, I resaved the image again. This resolves the problem about 98% for most images in all the Internet Exploders.

I want to caveat that instruction a little, though. If you choose Fuzzy Select and it ends up selecting more than the previous transparent area, then set to 3%, fuzzy select, click Delete, then reselect again with fuzzy select at 150%, then click Delete, and it should be resolved without deleting any of your image.

If you don't have Gimp, it's cross-platform and free for Windows, Mac, and Linux.

Volomike
  • 23,743
  • 21
  • 113
  • 209