Javascript and PNG's in IE 7 & 8

[rjaskelton]

Hey everyone,
I am trying to get a javascript slideshow to work on my site. It is actually a jQuery one, but I thought I would throw this in the regular javascript forum. Right now I have 4 PNG's that are fading in and out. Everything works great in FF, but doesn't work right in IE 7 & 8. The PNG's have transparency on them and currently show a black border around 3 of them. It doesn't have this border on the first element in the slideshow. Can someone give me some help to make this black border go away. It can be see at www.avicomonline.com/career.
Thanks,
Ryan

[aj_nsc]

There's nothing you can do to get rid of the black border in IE when fading elements that themselves have some level of transparency. IE has to use a css property called a filter (specifically filter: alpha(opacity=XXX)) when fading an element. Applying that filter on top of an already transparent element gives you this black border. There are workarounds that remove the black border usually after an animation is complete, but NOTHING can remove it during an animation (well, I suppose it could, but it would be so intensely resource heavy that the desired effect of fading wouldn't be achieved).

FORTUNATELY, it looks like you have another option - a JPEG. Your background is a uniform gradient so you can just build this gradient into the background of your images and make it look like they're transparent when they actually have the gradient built in.

You might think this is "cheating" (and it kind of is) but it's not that uncommon a practice. Check out skype's homepage (http://skype.com). They look like PNG's in the main slider don't they? Guess again! And the reason they did it this way was to avoid the exact issue that you are having.

Good luck.

[rjaskelton]

Thanks aj_nsc. We were playing around with that option earlier and I guess we will have to go that route.