[css] background-color che fa spostare elemento

[eugene]

[css] background-color che fa spostare elemento

Buongiorno

Si è verificato un strano fenomeno: ho un link testuale al quale ho assegnato un colore di sfondo.

Al passaggio del mouse, vorrei far cambiare questo colore, ma inspiegabilmente IE sposta l'intero elemento.

[URL=http://www.yodastudio.com/prove/arpa-kids/elementi_ambiente.htm]Questo l'esempio di quello che dico.

Dovete scorrere la pagina fino a "approfondimenti" dove si trovano "elementi naturali" ed "elementi antropici".

Come si può notare il box arancione diventa bianco al passaggio del mouse, ma se passiamo sopra il tastino inferiore si provoca lo spostamento sopra citato.

Come al solito, questo problema si verifica solo con IE.

Questo lo stile associato al link:

div#navigation .link2 {
width: 125px;
height: 15px;
text-decoration: none;
background-color: #F9DC6C;
padding-left: 20px;
margin-left: 40px;
display: block;
color: #154D87;
font-size: 90%;
font-weight: normal;
margin-bottom: 2px;
}

div#navigation .link2:hover {
text-decoration: none;
width: 125px;
height: 15px;
background-color: #FFFFFF;
color: #000000;
font-size: 90%;
}

Se elimino il background-color da :hover o se lo lascio con lo stesso valore della modalità normale, il problema è risolto.

So che ci sono diverse soluzioni alternative (come ad esempio mettere un'immagine di sfondo arancione per uno stato e bianca per l'altro) ma la mia testardaggine mi porta a voler capire perchè così non debba funzionare.

Grazie.

[claudioweb]

Ciao

Prova a fissare i vari padding e margin in maniera identica sia sul link normale, chesull'hover.

Ciao