PNG drop shadow problem

Hello all,

I have this issue that I cannot solve, and wanted to run it past the forum.
The problem is that I get this white halo around the PNG transparency.

I coded a sample of what the problem is, as you can see below:

PNG Problem

I opened the image background in more than one package, and there does appear to have the full transparency as desired. What baffles me is that I get this problem with new browser versions.

I have already done some online research, but the problem seems to be directed to older versions of IE rather than new browsers [1], which really does not solve the issue.

If you use something like Firebug, you’ll be able to change the background color of the container class and see how I get this white halo. Many of you might suggest that I simply but the image on a solid background colour, I would if I could. The problem is that the desired background colour has a slight gradient to it, so you can imagine my predicament.

It really needs solving before I can begin to the next stage of development and I really don’t want to change the design.

If anybody knows, or has experienced any issues like this I would be greatful if you could please assist.

Kind Regards.
Sega

The problem is that I get this white halo around the PNG transparency.

It looks like the drop shadow was created with a light grey fill and maybe 80% opacity. If you want the drop shadow to darken against the background color I would suggest using a black fill at 15% or 20% opacity. It’s a PNG-24 with alpha transparency so the drop shadow shows some of the background color through it.

The other things I see that could be changed are making sure your box background is all one color and trimming off the fringe from the drop shadow on the left and right of the box body.

Also, I don’t even see the bottom of your box in IE6 and IE7. Haven’t looked into the code on why that is, but just thought I’d point that out to you.

Thanks, I changed the drop shadow and it fixed the issue. I think maybe the issue in IE 6 and 7 has to do with the padding. Don’t worry, I should be able to fix these quirks in no time.

The main concern when designing to coding is to place elements in the expected positions pixel to pixel, especially on newer browsers and make it close with older browsers, so they can still get the design as intended.