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.
I've switched careers...
I'm NO LONGER a scientist,
but now a web developer...
Thanks aj_nsc. We were playing around with that option earlier and I guess we will have to go that route.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)