animated png fix for ie8 animation

After a few hours of trying the many fixes to the png black border problem I am turning to the experts.
The link will take you to a simple animated banner

My pngs fade in fine on all brewers except IE8. I have literally tried everything to stop the black border appearing around the png while it fades in.
Can anyone help?

PS: I have applied this class to my images but still no luck:
.png-fix {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
SomersaultConnect With a Mentor Commented:
That's the problem with IE8 and alpha channels in PNGs. Whenever you change the fade:ing it still ends up creating ugly-looking black borders. AFAIK there's no way to solve this except for adapting your image so there's no semi-transparent pixels.
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi Somersault and thanks for commenting on my question. I have come to conclusion that you are correct and that there is now way to solve my question.

I have awarded you the points and closed this question.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.