firefox displays image in a black box

i've got 2 linked images and when i open my website in safari or chrome they work fine but when i open it with firefox the images are black outlined.

you can see this here: http://cl.ly/3c0G0W1F1T1Y1e3I0K08

the html code is:

<div id="buy"><a href="http://stackoverflow.com"><img {border: none;} src="img/buy.png" /></a></div>

and

<div id="support"><a href="mailto:mail@mail.com"><img {border: none;} src="img/contact.png" /></a></div>

and the css code is:

#buy {
position: absolute;
width: 153px;
height: 50px;
margin-left: 750px;
margin-top: 370px;
}

and

#support {
width: 200px;
height: 55px;
margin-top: 80px;
marg开发者_开发技巧in-left: auto;
margin-right: auto;
} d d

where is the problem? it still doesn't work

Try this CSS property

a img{border: none;}

I can´t see any difference between firefox 4 and chrome 10, but you could try to change:

border: 0 none;

to:

border: none;

It's pretty hard to give a solid answer on the appearance of a border (which will likely be an css issue), given a screenshot. My guess is, that there is an tag around this image, which causes this border to appear. Set border-width to 0 or none on the image inside the a-tag.

Adding my comments below, so I can format them: Thanks voor expanding your question. Add this to your stylesheet:

#buy a img, #support a img { border: none; }

and remove the { border:none; } from your img tag.

Or keep your stylesheet unchanged and change your img tags, replace { border: none; } by style="border: none".

I would prefer the first option. Put as much styles in an external file as possible. This keeps your html clean and tidy.