Javascript and PNG’s in IE 7 & 8

@aj_nscApr 14.2011 — #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.

Javascript and PNG’s in IE 7 & 8

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript and PNG’s in IE 7 & 8

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴