[CSS] Bordo hover in una immagine-link

Signori vi chiedo un po di collaborazione:

In pratica ho una immagine-link.
Io vorrei che il bordo fosse ASSENTE di normale
Quando il cursore va sopra l'immagine questa colora il suo bordo (tipo hover).

Semplice direte voi...

Invece IE come al solito rompe le uove nel paniere. Non va.

Il bordo di IE non si colora, oppure non c'è modo di renderlo trasparente.

Se volete vedere come funziona provatelo QUI. Su firefox e opera va bene. Su IE non va proprio! Spulciate sul codice della pagina.

Ho dovuto mettere degli !important per fare in modo che risulti trasparente su IE (ma giusto sugli altri browser).

Che mi consigliate?

P.S.: Il testo intorno, con lo spuntare del bordo, non deve spostarsi (così come è adesso..)

[dreadnaut]

IE accetta lo pseudo-elemento :hover solo per il tag A - Firefox e Opera per tutti.
Metti il bordo attorno al link invece che attorno all'immagine:

A:hover { border: 1px solid blue; }

Mmm.... spiegami meglio come faresti...mmm...

Vedi Questa pagina e questa... Mi posteresti come imposteresti lo stile per favore?..

[dreadnaut]

pagina di prova qua :)

il tag A deve essere display:block, per essere alto come l'immagine. ma a quel punto si vuole allargare a 100%. Quindi devi infilarlo in un DIV; se il DIV ha float: left o right, non serve specificare la larghezza, altrimenti (come nel mio esempio) devi scrivercela tu

Ho messo il bordo bianco al tag A, cosi' non ci sono problemi di allineamento strano :)

[SolitaryExplorer]

In questi strani casi le devi provare tutte le sintassi!
Hai per caso provato a:hover img?

Mmm.... No no... non ci siamo.. Così devo chiuderlo in un div... Possibile che non c'è proprio possibilità di agire sui CSS senza usare DIV?... E poi il bordo dovrebbe essere trasparente e non bianco..

X solitary: si ci ho provato.. Nulla da fare

[dreadnaut]

Lo vuoi senza DIV ? togli il DIV e sposta lo stile nell'A.
Lo vuoi senza bordo bianco ? togli il bordo bianco.

Non mi sembrava una cosa cosi' complessa

<a class = "prova"><img src .... /></a>

.prova {

}
img { border: none; }
a.prova:hover { border: solid 1px red; }
così? va?
che poi è come hanno detto gli altri

<edit> scusa la domanda ma perchè lo vuoi block?</edit>

no che non va.... Se non imposto il bordo, quando con l'hover fa il bordo sposta tutto il testo accanto di un po... non so se mi sono spiegato...

[SolitaryExplorer]

Provare qualcosa del tipo:

img a {border: 0; margin: 5px}
img a:hover {border: 5px solid red; margin: 0}

?
L'ho buttata la... Tu prova e fammi sapere.

[dreadnaut]

mmmh no, quello prevede un link dentro un'immagine, ma le immagini non possono contenere nulla (sono tag autochiusi: <img ... />).

Attori', che ha la mia seconda soluzione che non ti piace ? :-)

x Dreadnaut: in riferimento al tuo link:http://dreadnaut.altervista.org/test/hover.html

Il prob qui è che è display block... in pratica è poco pratico da usare così.. Mi crea problemi ad allinearlo col testo... Guarda questo link.. E' il tuo stesso codice ma con il testo messo. Essendoci il display block non mi permette di mettere niente accanto all'immagine link..

Altra cosa è che, se ci fai caso, l'hover sposta leggermente l'immagine.. (sia in IE che firefox.

Il risultato finale che io vorrei ottenere è questo, e funziona solo con firefox.
Senza display block, possibilmente senza usare DIV, col testo fermo accanto che non si sposta, il margine dell'immagine inizialmente trasparente, ma che si colora passandoci sopra.. :(

x Solitary: Ancora niente :(

P.S. :Ragazzi comunque grazie ad entrambi dell'aiuto, apprezzo i vostri suggerimenti :)

[dreadnaut]

allora, il block purtroppo è -necessario- altrimenti firefox & Co. non danno l'altezza giusta all'elemento A. e l'A deve avere l'altezza giusta perche' e' l'unica cosa per cui funziona l'hover sotto IE :-(
A catena, dobbiamo mettere il float:left altrimenti l'A che e' block vuole diventare largo come lo schermo (come e' giusto che un display: block faccia)

per l'hover che sposta l'immagine, metti padding: 3px per A e padding: 2px; per A:hover. cosi' quando sparisce il bordo compensi (vedi esempio, ri-ri-corretto)

per il testo: vedo, ma non ho un modo per correggere. Dove andrebbero queste immagini ? magari si riesce a tocchignare il contesto per farlo funzionare

[SolitaryExplorer]

Dai una classe all'immagine e segui il mio ultimo consiglio.

.classe a {border: 0; margin: 5px}
.classe a:hover {border: 5px solid red; margin: 0}

Altrimenti prova con "a.classe" al posto di ".classe a" e "a.classe:hover" al posto di ".classe a:hover".
Come già detto, provale! ;)

[dreadnaut]

uhm, ma tu le hai provate ?
perche' combinazioni possibili ce ne sono veramente tante, ma la maggior parte non da risultati soddisfacenti. Non fargli tentare di tutto :-)

[SolitaryExplorer]

uhm, ma tu le hai provate ?
perche' combinazioni possibili ce ne sono veramente tante, ma la maggior parte non da risultati soddisfacenti. Non fargli tentare di tutto :-)

Diciamo che le combinazioni possono funzionare o no in base al contesto.
ll contesto varia in base al codice HTML (o CSS) in cui è inserito l'elemento.
Quando poi si parla di Microsoft Internet Explorer, non vanno seguite le normali e logiche regole degli standard... Bisogna invece provarle tutte!!!

Alla fine sai cosa succede? Che di solito si crea un foglio di stile pasticciato come Microsoft comanda, ed uno pulito ed ordinato per tutti gli altri browser che non siano Microsoft Internet Explorer.

il block purtroppo è -necessario-

...Bene... Ok... Farò in modo, dove dovrà andare, che questo block ci sia... altrimenti lascerò il mio sito così com'è... Cioè chi ha firefox e Opera si godrà l'hover, chi hai IE niente...

Grazie a entrambi

siccome avevo perso il filo del discorso :))) mi sono messo a rileggere il thread dall'inizio... ho visitato la pagina di esempio con IE e il bordo me lo fa vedere.. perchè dici di no? hai modificato il codice nel frattempo? di diverso da firefox c'è il margin (o il padding) di uno dei due elementi però il bordo c'è...

[dreadnaut]

@attori':

soluzione esterma: metti il bordo nelle immagini :-)
oppure, come dicevi tu, te ne freghi e chi usa IE vivra' senza :hover. poi un giorno passeranno a IE7 (che sara' aggiornamento critico per XP) e vedranno l'hover.

@solitary:

boh, i problemi di IE sono un numero finito fortunatamente. Si puo' scrivere del css che li "aggiri" tutti e funzioni bene un po' ovunque. Basta solo stare attenti ed evitare :hover, fixed, :after, padding, max-width....... (segue lista di tre pagine)

@demenziale:

la pagina di esempio e' cambiata 4 volte - l'ultima in effetti quasi funziona