IE shows black border around PNG when faded in

Question

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

Answer 1

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

Answer 2

i've had the same issue setting the opacity of an element using jquery as in $('div').css('opactiy',0.5); i was able to fix it by setting a solid background color for the 'div' in concern.

simple demonstration: http://jsfiddle.net/mwXs3/3/ (compare this in firefox and ie8)...

Answer 3

add this attribute to your tag like this

<img src="/someimage.png" alt="yourImageDesc" style="border-style: none" />

Answer 4

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.

Answer 5

put background color

background: #E1AE07;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -khtml-opacity: 0.50;
    -moz-opacity: 0.50;
    opacity: 0.50;