Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE shows black border around PNG when faded in

Tags:

jquery

fadein

Here is my site: http://smartpeopletalkfast.co.uk/ppr6/

I have PNGs with transparency fadein with jQuery. IE8 (havnt tested with others yet) is showing black borders around the PNGs while they fade in. I know this is a recognized issue and I've tried a few methods without luck.

However, I've noticed that the heart (the last image to load) doesn't have the black borders. Why is this one OK? Hopefully if I figure out why I can use it to fix the others.

Thanks

UPDATE

I'd played around with code so much I hadn't realized I'd unintentionally disabled the fade in of the heart, so thats why no borders.

It's a weird issue this one. In all the forums I've looked at their are solutions that seem to work for some people but not for others.

like image 506
Evanss Avatar asked Feb 11 '11 18:02

Evanss


3 Answers

I know this thread is very old, anyways I found this post which worked great for me, it completely removes the black borders from PNG's in IE7, IE8.

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */ 
}

You can find it int this thread http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

like image 94
Carlos Quijano Avatar answered Oct 26 '22 15:10

Carlos Quijano


add this attribute to your tag like this

<img src="/someimage.png" alt="yourImageDesc" style="border-style: none" />
like image 42
Steven Avatar answered Oct 26 '22 14:10

Steven


Using a PNG-8 worked for me. Their is a slight white border to the image which is in the actual file not a browser issue but in my case this looks fine.

like image 41
Evanss Avatar answered Oct 26 '22 13:10

Evanss