PNG Image With Transparency Renders With White Background In All Browsers?

I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an开发者_运维技巧 asp:Button when developed).

Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.

Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.

Also, I have checked the CSS and there are no styles that contain a white background colour element.

Any one got any ideas?

Many thanks!

Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.

However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:

When calling the button, I've typed this out to begin with:

<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />

Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:

<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />

This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.

EDIT (24/01/2010)

I found out how to fix this issue in the HTML document, by pure accident!

What you need to do, in the CSS you have to call the following:

background-color: transparent;
border: none;

This removes the grey/white background on the back of the button, and it also removes the border of the button.

try adding border: none; to your button style.

I think if you have already tried setting:

submit{background:none;}

and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.

Edit (20th Jan): I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything). If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?

It's kinda weird :D

check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image