PNG losses transparency when used as a link.

Question

I have an image over a table that has been style with CSS. When I have my image on the table without a href it is fine, once I apply an href the transparency is no longer working. Any way around this?

Table css

table.list_data {
background-color:#F3F3F3;
border:1px outset #A1A1A1;
border-collapse:collapse;
border-spacing:2px;
font-family:'MS Shell Dlg';
font-size:13px;
font-style:normal;
font-variant:normal; 
font-weight:normal;
width:100%;
}

Happens in Chrome and FF, haven't tried IE but I expect the same.

html.....

<td><a href="javascript:loadContent('#action','addjob.php?id=31');"><img alt="Add A job" src="images/add.png"/></a></td></tr><tr><td>joe bloggs</td>

Answer 1

try adding the following:

a{
  background: transparent !important;
}
a img{
  background: transparent !important;
}

This is not a terribly good idea to do in a production site. This indicates that there is something wrong with your css code. Try looking through the css and find whatever is causing your anchor tags to have a non-transparent background.

Answer 2

If you want to assure that you have transparent PNGs no matter how the code is, use TweakPNG.

http://entropymine.com/jason/tweakpng/