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 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.

Not sure I can answer your question, but for more information about IE's PNG transparency issue with jQuery's fading, see: http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem — Michael Martin-Smucker, Feb 11 '11 at 18:52
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. — Evanss, Feb 11 '11 at 20:14

score 8 · Answer 1 · answered Feb 08 '12 at 16:17

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

This solution works for both images and elements with backgrounds. Thank you very much! — R Keppel, Nov 15 '13 at 08:42

score 4 · Answer 2 · answered Feb 18 '11 at 16:05

4

add this attribute to your tag like this

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

answered Feb 18 '11 at 16:05

Steven

181
8

Is this supposed to remove the white border? It doesn't work for me. The white border is around the non-transparent pixels, not around the whole png. You can see it here: http://smartpeopletalkfast.co.uk/ppr6/ – Evanss Feb 28 '11 at 13:31
It removed the black border around by png also :) – samneric Oct 04 '13 at 01:39

score 3 · Accepted Answer · answered Mar 19 '11 at 14:02

3

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.

answered Mar 19 '11 at 14:02

Evanss

23,390
94
282
505

score 2 · Answer 4 · edited Jun 19 '12 at 11:06

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;

schellmax · Answer 5 · 2011-03-02T20:04:32.367

0

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)...

edited Mar 02 '11 at 20:04

answered Mar 02 '11 at 19:47

schellmax

5,678
4
37
48

http://jsfiddle.net/mwXs3/5/ unfortunately, the bg color set on div.image stays in you way, but you could try approximating the color to the overall background. – schellmax Mar 02 '11 at 20:07

IE shows black border around PNG when faded in

5 Answers5

Linked