Ciao,
ho una pagina del tipo

<div class="article">
<h1>Titolo</h1>



Testo articolo, con testo link e immagine link
[img]immagine.gif[/img]
</p>
</div>

Nel relativo foglio di stile ho le seguenti regole

.article a {
color:#689BAC;
text-decoration:none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #689BAC;
}

che mi permette di colorare e sottolineare il link testuale, e

.img {
border: 1px dotted #666666;
padding: 2px;
margin-top: 2px;
margin-right: 10px;
margin-bottom: 2px;
margin-left: 10px;
}

che mi permette di visualizzare l'immagine in un riquadro con padding e margine.
Il problema che non riesco a risolvere è che mentre in IE (7) funziona tutto bene, in Firefox (2) l'immagine si presenta con il riquadro voluto + una sottolineatura di 1px dotted #689BAC presente nella classe .article a.
Cosa sto sbagliando secondo voi?