• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

PNG Problem


Senior Member
Hi Guys,

I've been working on a small site over the last few weeks and have come across a problem. On this page Topaz Online [MOCKUP] you can see some circular shapes that spin round when you hover over the text links, they look perfectly fine in firefox, however when it is viewed in Internet explorer and I get a huge thick black outline around the circle. Does anyone know a fix for this?

I havge tried a various amount of PNG fixes I've also tried a few css tweeks and image tweeks and it still won't disappear. I understand IE still does not handle PNG well, all this was outlined to the client before hand but it seems my/our advice was not taken on board by the client.

This page has been created using jquery (ive tried a jquery fix) but still nothing. Has any idea's on what steps I can take to get this fixed? I used about 8 hours on my life yesterday evening on this, extremly annoying. Any help would be cool, thanks very much guys.


Senior Member
I don't have IE here so I can't really see it for myself. But I can only imagine that a PNG fix should work and I don't see why it doesn't.

Which version of IE are you viewing this in?
I don't have IE here either unfortunately. But that sounds weird cause IE8 and IE7 supports alpha transparency. You only need a fix for IE6. Doesn't sound like a PNG problem if what you get is a thick black outline (like a border that follows the shapes of the circles?).


Active Member
Hi Glen, I haven't checked your code fully, but it looks very similar a problem I have come across myself, I suspect its a bug in the rendering engine of IE for handling opacity on pngs

In my non expert kinda way of trying to explain it :)

Your using alpha transparent pngs which work fine in modern browsers and also lower versions of IE with various png fixes. however! from my experience ie cant handle changes to the opacity of the alpha value of image during transitions. thus why your getting the black circles.

to highlight it, looking at your page in IE your main LARGE circle is an alpha transparent, and picks up the opacity correctly from the image file on load, where as your smaller circles opacity are changed as it animates, and thus IE looses the default alpha level in the image, and tries to handle it based on absolute values. hence the solid black circles.

To the best of my knowledge there is no real fix for this, the only solution I managed to find that worked better, if my memory serves me well was to use png8, and specifying the matte as the background colour ie light blue in your case.

I hope this helps.


Does that make sense?


Senior Member
Hey all - watching this thread not because I've become super clever and can provide a reply, but because this is a project Glen is working on for me! So maybe because he's a busy guy I can do this for him first.

Thanks for the reply Sunburn - im no expert with making pngs, could you tell me how to do this:

use png8, and specifying the matte as the background colour ie light blue in your case.
PS: Mr Kipling = cute.


Senior Member
Hey Guys,

Geoff cheers for the reply. I can try that this evening if Emma has not already? Levi (I really need to catch your real name) Thanks for that, I tried that very link a few days back, didnt seem to fix the problem. I'll get back to it tonight as I leave for Silverstone Tomorrow, hopefully I can get this one cracked, cheers for the feedback guys!



Active Member
Its defo not a PNG issue because if it was you would have a square around it not a circle, the image also appears fine when viewed on it's own in IE8 so it must be a Jquery issue and a problem with it rendering once the Jquery has been run for some reason.

If it was an IE issue with IE8 having issues rendering it when it was moving you would expect once it has finished moving to go away but it doesn't.

Had a brief look at the JavaScript and nothing really stands out either.

You could try adding this to the bottom of your circle class:

Below your other filter line.
Or:border:5px white
Bar that I really have no idea, if you get it fixed I would love to know how though. :)

To change the matte in Fireworks it is in the optimization window 2 down on the right hand side.That said I'm pretty sure that would show cross browser if that was the issue tbh.As the image is fine on it's own:


I would say its more down to how IE8 handles the Jquery, not looked though all the Jquery code, and don't use it myself, but could it be down to Jquery adding a class that all ready has a black border applied to it maybe?
Hi guys,

I cant thank enough for all the feedback really appreciated and I've learnt a good thing or two tonight. Thanks for the inoput Jaza, I didnt use your method but it was time well spent and a good read along with great advice!

I have used geoff's method and it looks ok...i'll see what the client feedback is, thanks everyone for the help!

I owe you guys a few beers, why not join me this weekend at Silverstone :)

(*Man I need to kick this F1 obsession)


Active Member
Hi Glen, looks alright in IE.

@ Jay, I dont think its a specific issue to the jquery framework, i feel its due to the lack of CSS3 opacity support in IE full stop, when this is cupeled with some form of transition effect ala (changing the opacity value) it knackers up the rendering of the alpha transparency.

Im sure this would be the same for any framework used, perhaps we should test it then prove it, can call its the kipling bug :)

@ Beer ... dam wish you could send been via email :)
@ Silverstone, sorry chap, I splashed out on tickets to Royal Air Force Charitable Trust Enterprises


Senior Member
I just wondered.. as the lady who's site this is is not happy with not having her colours there... is there no way to have simply colour as a background, not an image like that?