a: hover ... cambio sfondo di immagini

[speriamobene]

ho una galleria di immagini che ha la seguente forma:

<div id="fotodiv">
<span class="immagine">[img]catalogo/mini001.jpg[/img]</span>

<span class="immagine">[img]catalogo/mini002.jpg[/img]</span>

</div>

e nel foglio di stile ho previsto

#fotodiv .immagine {
	height: 120px;
	width: 152px;
}	

#fotodiv .immagine img {
	border: 1px solid #330099;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 6px;
	margin-top: 6px;
	padding: 6px;
	height: 120px;
	width: 152px;
}

#fotodiv .immagine a {
	background: #FFFFFF;
	height: 120px;
	width: 152px;
}

#fotodiv .immagine a:hover, #fotodiv .immagine a:focus  {
	background: #66CCFF;
	height: 120px;
	width: 152px;
}

voglio insomma ottenere che lo sfondo da bianco diventi blu quando il mouse e' sull'immagine e ciò corrisponde ad avere una cornice che si muove attorno all'immagine.

in explorer tutto è ok.
in fire fox invece ho invece che dello sfondo bianco una linea bianca in basso all'immagine... e pure che eccede i bordi dell'immagine stessa.

come risolvere? che il problema sia in span?

[speriamobene]

Ecco quello che voglio e che accade con explorer:

[speriamobene]

Ecco quello che invece ottengo con firefox.

Come intervenire?

[Mich_]

Mi pare che stai sbagliando i conti.

Se l'immagine e` di 120px e la inserisci in un riquadro di 120px non potrai vedere il bordo attorno all'immagine.
Rivedi i conti tenendo conto del bordo.

Ti conviene evitare il padding (che viene gestito sbagliato da IE), ed usare invece il margin o il border.

[speriamobene]

tenendo conto del suggerimento ho impostato:

#fotodiv .immagine {
height: 146px;
width: 178px;
}

inoltre ho provato a tolto il padding... ma non ho risolto.

Come fare ora?

[Mich_]

torna a postare tutto il CSS.
In quello di prima gli erorri di dimensioni erano piu` diuno (ad esempio le dimension dell'<a> erano sbagliate - da togliere?)

Attenzione anche all'ordine dei CSS: dal piu` esterno al piu` interno.