Bordo immagini-link

[tanteidee]

Ciao a tutti!

Ho delle immagini-link con un bordo di un colore e vorrei che al passaggio del mouse il bordo cambiasse di colore.

Utilizzo questo codice:

.bordo_immagine-link {
display: block;
border: 1px solid #000080;
padding: 5px;
}
.bordo_immagine-link:hover {
border: 1px solid orange;
}

ma non funziona su IE7, su Firefox si.

Cosa devo fare? Quale codice cross-browser dovrei utilizzare? Quale codice digerisce meglio IE7?

[Mich_]

Supponendo di avere un codice HTML del tipo:
[img]...[/img]

Il CSS da usare per ottenere l'effetto in tutti i browser e`:

a img {
  display: block;
  border: 1px solid #000080;
  padding: 5px;
}
a:hover img {
  border: 1px solid orange;
}

Il problema con IE e` che non riconosce le pseudoclassi su tag diversi dai link.
IE6 non li riconosce mai; IE7 e IE8 dovrebbero riconoscerle se lavori in modalita` standard (in pratica con DTD XHTML 1.0 strict o successive), ma non le riconosce in modalita` quirks (retrocompatibile).

[tanteidee]

Originariamente inviato da Mich_
Supponendo di avere un codice HTML del tipo:
[img]...[/img]

Il CSS da usare per ottenere l'effetto in tutti i browser e`:

a img {
  display: block;
  border: 1px solid #000080;
  padding: 5px;
}
a:hover img {
  border: 1px solid orange;
}

Il problema con IE e` che non riconosce le pseudoclassi su tag diversi dai link.
IE6 non li riconosce mai; IE7 e IE8 dovrebbero riconoscerle se lavori in modalita` standard (in pratica con DTD XHTML 1.0 strict o successive), ma non le riconosce in modalita` quirks (retrocompatibile).

Funziona ma in IE7 non mi tiene il padding, come mai? E superabile il problema? Nessun problema con FF.

[Mich_]

Originariamente inviato da tanteidee
Funziona ma in IE7 non mi tiene il padding, come mai? E superabile il problema? Nessun problema con FF.

Se conosci la dimensione dell'immagine, puoi definire

a {
  width: ...px;       /* immagine + 12px */
  height: ...px;       /* immagine + 12px */
  display: block;
  margin: 0;
}

Probabilmente dovrai anche mettere una classe all'immagine, altrimenti tutti link avranno lo stesso stile, compreso quelli che contengono solo scritte

Se non conosci la dimensione dell'immagine, credo che la cosa piu` semplice sia usare la DTD XHTML 1.0 strict e trasformare il codice in modo da seguire tale regola.