link su immagine-effetto funziona solo su IE

[froz]

Buona sera ragazzi avrei un piccolo problema:

ho questo codice con la quale vorrei dare all'immagine linkato l'effetto di cambiare colore di bordo quando ci si passa sopra col mouse, ma funziona solo con IE, con firefox il bordo lo visualizzo a metà, il resto del bordo non so che fine fà...quale può essere il problema?ecco il codice:

.divimg{
width: 180;
height: 135px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
border-top:1px solid #ffffff;
border-bottom:1px solid #ffffff;
}
.divimg:hover{
width: 180;
height: 135px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
}

[seed_squall_it]

Allora...suppongo che la tua classe "divimg" sia una classe che scrivi dentro l'elemento <a> (altrimenti IE non supporta l'hover). Poi ci sono un errore e una "ridondanza" nel codice: width: 180 non significa nulla per il browser...devi impostare l'unità di misura. I bordi, visto che sono tutti uguali in entrambi gli "stati" del link, puoi impostarli una sola volta:

.divimg {
width: 180px;
height: 135px;
border: 1px solid #ffffff;
}
.divimg:hover {
/* Puoi omettere le dimensioni...vengono ereditate dalla
regola di stile precedente */
border: 1px solid red;
}

Per finire, ricorda che <a> è un elemento inline e <img /> è un elemento rimpiazzato. Mentre IE (facendo di testa sua!) imposta l'elemento <a> con le dimensioni che gli assegni, Firefox non lo fa perché segue gli standard, che dicono che agli elementi inline non si applicano le dimensioni. Siccome il tuo bordo lo devi applicare per forza all'elemento <a> (per avere l'effetto sull'hover da parte di IE), devi dare a questo elemento dimensioni e per farlo, devi trasformarlo in un elemento a livello di blocco con display: block.

Ricorda anche di impostare la regola di stile dell'immagine con border: none.