Strange border (for me !) on IMG

Question

Hello to everybody, i have the following code in html :

<div id="header">
    <div id="logo"></div>
        <div id="versione">
            <a class="ui-widget-content ui-corner-all countryVersion" href="blank.html">Versione italiana<img src="ita.png" /></a>                  
            <a class="ui-widget-content ui-corner-all countryVersion">Deutsche Version<img src="ger.png" /></a>
            <a class="ui-widget-content ui-corner-all countryVersion">English version<img src="eng.png" /></a>
        </div>
    </div>
</div>

and the following CSS :

.countryVersion:first-letter { font-weight : bold; font-size:1.2em;}

.countryVersion{
float:right;
margin : 1px 3px 0;
padding: 4px;
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
font-size:0.9em;
text-decoration : none;

}

.countryVersion img {
float : right;
margin : 1px 3px 0;

}

and it seems everything ok, but I have a sort of disturbing "white border" around the image. I dont' know why but I think it is related to the anchor even if I am not sure.

Help me please

Alessandro

Answer 1

Try this css:

a img{
  border:none;
}

Answer 2

As Sarfraz pointed out, try setting the image border. I don't think you'd need another entry in your CSS as he did, you should be able to add it to your existing tag:

 .countryVersion img {
    float : right;
    margin : 1px 3px 0;
    border: none;

}