Solved

animated png fix for ie8 animation

Posted on 2011-09-22
2
949 Views
Last Modified: 2012-06-21
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 http://www.soundsairpark.com/test.php

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?
N

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;
}
0
Comment
Question by:Neil_Bradley
2 Comments
 
LVL 4

Accepted Solution

by:
Somersault earned 500 total points
ID: 36580743
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.
0
 
LVL 5

Author Closing Comment

by:Neil_Bradley
ID: 36595984
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.
Cheers,
N
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to dynamically set the form action using jQuery.

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question