Ho impostato poche semplici regole con i CSS per i link. Tuttavia non riesco ad eliminare questo fastidioso bordo inferiore che si visualizza quando passi il mouse sopra le immagini con link

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
img a { border:0px;}
a:link {color: #006600;
}
a:visited { color: #006600;}
a:hover {
	color: #009900;
	border-bottom:1px solid #009900; padding-bottom:1px;
}
</style>
</head>

<body>
[img]cane.jpg[/img]
</body>
</html>