Hover nelle immagini non funziona allo stesso modo sui vari browser

**Harlandraka_94** · 02-02-2013, 17:57

Ciao a tutti, sto avendo un problema credo di compatibilità di css tra i vari browser.
Ho un piccolo slider verticale che mostra tre foto per volta.
Per ogni foto, ho assegnato un hover col css, nel momento in cui vado sulla foto col cursore, la foto deve "scurirsi" (in pratica gli metto una png nera semitrasparente sopra) e deve apparire un testo in basso a destra, diciamo come "didascalia". Il problema è che succede una cosa diversa per ogni browser, su chrome e safari succede esattamente quello che voglio, ma sia firefox, che opera, che explorer (e su quest'ultimo non avevo dubbi), il css fa un po' quello che gli pare, ecco uno screenshot dei vari browser (la fascia rossa è quella col mouseover):

Trovate l'immagine a http://alessandroderoma.it/try/slider/rect3922.png

Chrome e Safari fanno esattamente quello che vorrei, mentre:

Opera: mostra solo la png semitrasparente nera, ma non il testo in basso a destra
Firefox: Sfasa la png, se vedete c'è un margine di qualche pixel in alto nell'immagine "5", inoltre nelle immagini "3", "6", "9", ecc, insomma nelle ultime immagini delle triplette che mostro, il testo magicamente scompare. Inoltre lo spazio tra le varie immagini è maggiore rispetto a quello mostrato da opera e chrome
Explorer: non succede assolutamente niente al mouseover. Inoltre lo spazio tra le varie immagini è maggiore rispetto a quello mostrato da opera e chrome

Non riesco a capire come mai, qualcuno sa illuminarmi?

Per testare direttamente l'esempio andate a:
http://alessandroderoma.it/try/slider

Grazie mille in anticipo, ciao!

EDIT

Ho aggiunto un semplice <!DOCTYPE html> e il mouseover su explorer funziona, l'unico problema rimane il fatto che io non riesca a vedere il testo su Opera

**Experiment8** · 03-02-2013, 19:34

Ci sono alcune cose che non riesco a capire, innanzitutto sarebbe fantastico se mi postassi il codice css, e comunque il bordo sulle immagini significa che non hai attribuito border: 0; e display: block; al css delle immagini, già con questo ti risolvi un problema.
E per curiosità, visto che lo sfondo è nero non faresti prima invece di mettere una png nera a dare una proprietà di opacity all'hover?
Qualcosa tipo:

codice:

img:hover {
   opacity: 0.6;
   filter: alpha(opacity=60);
}

Fammi sapere

**Harlandraka_94** · 03-02-2013, 19:45

No, l'opacity non modifica solo il background, ma tutto l'oggetto, e a me serve che le scritte siano ben visibili e non semitrasparenti.
Siccome mi pare che l'rgba non funzioni su tutti i browser voglio evitare di usare

codice:

background-color:rgba(0,0,0,0.6)

quindi uso la png, comunque ho risolto togliendo il text-indent e sostituendolo con un padding-left che vale 99999px senza hover, e 0 con hover, così succede esattamente lo stesso del text-indent.

Discussione: Hover nelle immagini non funziona allo stesso modo sui vari browser

Strumenti discussione

Ricerca discussione

Visualizza

Hover nelle immagini non funziona allo stesso modo sui vari browser

Permessi di invio