immagini di rollover attive anche dopo passaggio del mouse in IE6

[babeuf]

Ciao,
ho un problema con dei rollover in IE6. Quello che voglio ottenere sono dei link testuali con delle immagini di sfondo in grado di adattarsi verticalmente alla lunghezza del testo (variabile). Per far ciò ho creato delle classi, ed ho messo nello lo sfondo di ognuna una porzione diversa dell'immagine (come si vede dal codice qui sotto). Quando passo sul link col mouse i rollover funzionano bene in tutti i browser, funzionerebbero anche in IE6, se non fosse per il fatto che quando riporto il puntatore del mouse fuori dal link, quest'ultimo continua ad apparire attivo lasciando visualizzata l'immagine di rollover. Le cose si sistemano se con lo scrolling porto il link fuori e poi di nuovo dentro al video (o naturalmente facendo un refresh).
Qualcuno saprebbe dirmi a cosa può essere dovuto?
Grazie.


HTML

<div>
   <div class="button">
      <a href="#">
         <span class="icona_modifica">
            <span class="modifica_desc_top"></span>
            <span class="modifica_desc">
               <span class="testo">Modifica</span>
            </span>
            <span class="modifica_desc_bottom"></span>
         </span>
      </a>
   </div>
</div>

CSS

.button {
 float: left;
}

a .icona_modifica{
 background: url(images/icona_modifica.gif) left top no-repeat;
 min-height: 110px;
 width: auto;
 margin: 0 auto;
 display: block;
 position: relative;
 text-align: center;
}

a .modifica_desc_top{
 background: url(images/icona_modifica_01.gif) left top no-repeat;
 height: 10px;
 width: 100px;
 display: block;
 position: relative;
 top: 73px;
}

a .modifica_desc{
 background: url(images/icona_modifica_02.gif) left top repeat-y;
 background-color: inherit;
 color: white;
 min-height: 1px;
 width: 100px;
 display: block;
 position: relative;
 margin: 72px 0 0 0;
 bottom: 0;
 padding: 1px 5px 0;
 font-weight: bold;
 font-size: 100%;
 text-align: center;
}

a .modifica_desc .testo{
 margin-right: 9px;
 display: block;
}

a .modifica_desc_bottom{
 background: url(images/icona_modifica_03.gif) left bottom no-repeat;
 height: 10px;
 width: 100px;
 display: block;
 position: relative;
 bottom: 0;
}

a:hover .icona_modifica{
 background: url(images/icona_modifica_h.gif) left top no-repeat;
}

a:hover .modifica_desc_top{
 background: url(images/icona_modifica_01_h.gif) left top no-repeat;
}

a:hover .modifica_desc{
 background: url(images/icona_modifica_02_h.gif) left top repeat-y;
}

a:hover .modifica_desc_bottom{
 background: url(images/icona_modifica_03_h.gif) left bottom no-repeat;
}

[fcaldera]

è dovuto ad un bug nel ridisegno allo/dallo stato hover in IE6

prima della regola a:hover .icona_modifica aggiungi

a:hover {
direction : ltr;
}

[babeuf]

Grazie Fabrizio!
Funziona tutto.