problemi con rollover immagini

[enc98]

ciao a tutti, sto realizzando una pagina web con rollover di immagini nei css.

la pagina è questa

il problema è che quando passo con il mouse sulle immagini (la prima volta) queste si mischiano.

nella pagina il codice è <a href="#" class="ROLL">, mentre nel foglio di stile il codice è:
a.ROLL
{
background-image: url(images/boxfoto1.gif);
width: 520px;
height: 189px;
}

a.ROLL:hover
{
background-image: url(images/boxfoto1_over.gif);
width: 520px;
height: 189px;
}
per le altre foto ho sostituito ROLL con ROLL1, ROLL2, ROLL3
con 2 foto non mi da problemi, con 4 sì.

qualcuno potrebbe consigliarmi qualcosa di alternativo o risolvere questo?

grazie enc98

[enc98]

scusate, il link è questo

www.dialogcomunica.com/istitutidiricovero

grazie enc98

[Mich_]

Dovresti definire il linguaggio in cui scrivi il tuo codice. Altrimenti non puoi pretendere che i browser si comportino come vuoi tu. Vedi il tag DOCTYPE.

E dovresti abbandonare le tabelle di formattazione: rendono il codice molto piu` complesso da interpretare da parte dei browser e sono contrarie alla legge sullaccessibilta` (4/04).
E` vero che l'isitituzione e` privata, ma probebilmente vive di supporto pubblico, quindi e` immorale fare una pagina che non segue le leggi delle amministrazioni ipubbliche.