Issue with transparent images on a transparent background

Question

I have a weird issue with a graphic with rounded corners.

I have a HTML page with the body set to transparent (style="filter:alpha(opacity=100);opacity:100;background-color:transparent;") and within this body is a div with a PNG image with rounded corners, with transparency on the edges so that it transitions correctly with the background.

This HTML page is contained within an iFrame on top of another HTML page, so I want the transparent image contained within the iFrame to show through and thus the rounded image to transition correctly with the background (which is an image) on the page that is calling the iFrame (hence the body within the iFrame has a transparent background).

This actually works fine, except for the transparency on the rounded corners. For some reason there's a very fine but noticeable jagged black edging around the rounded corner, as if a black matte was put on it.

I have also tried it with transparent GIFs, but got jagged white edgings instead.

Has anyone ever tried to do something like this before, and got it to work? If so, I'd love to hear how.

EDIT Here's a link to the result: image The image with the leaves is the background image (Flash) of the calling HTML. The search box is contained an an iFrame with a transparent background.

This happens on IE7. Firefox seems ok, oddly enough.

Answer 1

You have set Transparency on the body tag to 100... This means its not transparent, for it to be fully transparent you would have to set it to 0. But doing this will result in all elements contained in the body tag to be transparent as well.

I think something similar is happening, the search box is inheriting the opacity attribute which you set.

If you remove the opacity settings what happens?

Also check this website out, http://www.domedia.org/oveklykken/css-transparency.php