Rollover

[ecaon82]

Ciao a tutti e grazie intanto per gli aiuti che mi darete :-)
Volevo mettere nella mia pagina web delle immagini linkabili con rollover ma purtroppo se apro la pagina con firefox compaiono immagini doppie come nella figura allegata. ecco il codice che ho messo nella pagina web:

<div id="img_kid"> <a href="kid_art.html"/></div>

<div id="img_sceno"> <a href="scenografia_e_regia.html"/></div>

<div id="img_scrittura"><a href="scrittura.html"/></div>

<div id="img_acrilico"><a href="acrilico.html"/></div>

<div id="img_digital"><a href="digital_art.html"/></div>

<div id="img_olio"><a href="olio.html"/></div>

<div id="img_acquerello"><a href="acquerello.html"/></div>

<div id="img_disegno"><a href="disegno.html"/></div>

ecco invece il codice css per img_disegno (il codice per tutti gli altri è praticamente identico):

#img_acquerello a:link{

width: 95px;
height: 200px;
float: right;
padding-right: 2.5px;
padding-left: 2.5px;
text-decoration:none;
display:block;
background:#fff url(../immagini/corsi/acquerello.jpg) no-repeat 0 0;
}

#img_acquerello a:hover{

width: 95px;
height: 200px;
float: right;
padding-right: 2.5px;
padding-left: 2.5px;
text-decoration:none;
display:block;
background-image:url(../immagini/corsi/acquerello_roll.jpg);
}

Secondo voi cos'è che non va?

Vi ringrazio davvero tanto e se potete darmi un'aiuto in proposito ben venga, io ci ho dedicato molte ore ma niente. a presto :-)