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