views:

294

answers:

1

Hello.

I have been checking a lot of topics on this situation and still haven't found a solution to this problem. Is it even possible?

I have a website (http://dev.ultimate-web.dk) which uses the cycle plug-in (http://malsup.com/jquery/cycle/) to fade the top cases. As you see on the first image when the fading occurs, it gets a black border to fill out the semi-transparent pixels in IE7-8.

Why is that, and how can I fix - if I even can fix? It works it all other major browsers.

Thanks!

+1  A: 

This has frustrated many a developer from time to time. Unfortunately, the going solution seems to be to put the element in a container that has an opaque background and fade that container.

See http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem a few good answers. I found a great page on this on the internet about 3 months ago but I'm struggling to find it now. I'll keep looking though.

From Microsoft:

The behavior you are seeing is a design limitation of Opacity Transition filter. This is not an equivalent of the true CSS3 opacity style. We aren't really using the Technical Beta to collect feature requests. However, we will consider this feature request for a future release.

Best regards,

The IE Team

Andy E
Odd thing is I am fading the parent container (div.case) which has a background: transparent ! important; style. Hmm...
meep
@meep - transparent won't work as the background colour of the parent container - it needs to be fully opaque.
Andy E