• User Attivo

    [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.


  • Super User

    Ciao 🙂

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

    Ciao :ciauz: