[CSS] Problemi con rollover in IE

[lionalex]

salve a tutti,
ho letto pochi minuti fà un piccolo tutorial per creare degli effetti di rollover con dei semplici comandi CSS. In pratica far comparire un immagine (per una galleria) o un testo (per dei semplici link) al solo passaggio del mouse su di un link.
L'ho provato subito, però con explorer non funziona, perchè???
Ora vi scrivo tutto quello che ho fatto
Questo è il CSS

a.info span{
	display: none;
}
a.info:hover span{
	display: block;
	border: 1px dashed black;
	width: 98px;
	height: 45px;
	background-color: #F0F8FF;
	z-index: 100;
	line-height: 15px;
	position: relative;
	top: -30px;
	left: 50px;
	text-align: left;
}

Questo invece è il codice PHP/HTML

<div ...>
<a href="#" class="info navy">
  <b>NUMERO</b>
  <span class="navy">
    <font class="rosso">
      <b>SQUADRA</b>
    </font><br />
    <b>Ultimo punteggio: NUMERO</b>
  </span>
</a>
</div>

In pratica volevo fare in modo che passando il mouse sul numero apparisse un riquadro con in punteggio precedente di quella squadra. Con Fire Fox funziona benissimo, mentre con EXPLORER no, perchè?

[dementialsite]

Ti consiglierei di sostituire lo stile display con lo stile visibility, fanno due cose leggermente diverse:
- display indica in che modo può essere visualizzato l'elemento, tra i valori che può assumere ci sono none (caricato, ma non presentato), block (presentato come elemento di paragrafo) e inline (presentato come elemento non-paragrafo)
- visibility invece carica comunque l'elemento e gli dà il suo spazio, ma puoi impostare questo stile a hidden (elemento caricato e spaziato, ma non visibile) oppure visible (elemento caricato, spaziato e visualizzato secondo le specifiche di display o quelle di default)

In conclusione: prova a sostituire display:none e display:block rispettivamente con visibility:hidden e visibility:visible. Puoi lasciare lo stile display:block se hai comunque necessità di mantenere il tag A come paragrafo e non come elemento non-paragrafo.

Stammi bene...

[lionalex]

ho risolto il problema del DISPLAY aggiungengo questa riga

a:hover{
  display:block;
}

Sempre i soliti problemi di EXPLORER. Però non ho ancora ben capito la differenza tra VISIBILITY e DISPLAY. In pratica con VISIBILITY lo spazio resta vuoto per quando poi verrà visualizzato quello che avevo nascosto? Qual'è la differenza tra elemento di PARAGRAFO (block) e elemento NON-PArAGRAFO (in-line) ???

[dementialsite]

... Però non ho ancora ben capito la differenza tra VISIBILITY e DISPLAY. In pratica con VISIBILITY lo spazio resta vuoto per quando poi verrà visualizzato quello che avevo nascosto? ...

Esattamente: diciamo che se tu scrivi così:

<P STYLE="visibility:hidden">Prova a leggere questo se ci riesci!</P>

avrai in pratica un "buco" di un paragrafo nella tua pagina. Se invece scrivi:

<P STYLE="display:none">Prova a leggere questo se ci riesci!</P>

il tuo paragrafo sarà comunque caricato e non visualizzato, ma senza lasciare "buchi"

... Qual'è la differenza tra elemento di PARAGRAFO (block) e elemento NON-PArAGRAFO (in-line) ???

Ti elenco qualche tag così puoi renderti conto della differenza, se ne conosci il significato:
- tag di paragrafo: P, DIV, TABLE, APPLET, UL, OL, LI, DL, DT, DD
- tag non-paragrafo: SPAN, IMG, A, B, I, U, STRIKE, NOBR
puoi inoltre notare che ci sono dei tag non appartenenti a nessuna delle due categorie, come TR, TD, tutti i tag dentro HEAD e altri simili.

Stammi bene...

[lionalex]

grazie mille per la spiegazione...ora il mio problema è un altro...maledetto EXPLORER....ho fatto in modo che passando il mouse su dei numeri, mi esca una finestrina con delle informazioni aggiuntive, tramite il DISPLAY. Tutto ciò dentro un DIV. In firefox funziona tutto benissimo avendo impostato la finestrina aggiuntiva in un livello superiore con z-index, mentre con explorer succede un casino, si sposta tutto fregandosene del livello maggiore.
Questo è il codice CSS:

a.info:hover span{
	display: block;
	text-decoration:none;
	border: 1px dashed black;
	width: 98px;
	height: 45px;
	background-color: #F0F8FF;
	z-index: 100;
	line-height: 15px;
	position: relative;
	top: -30px;
	left: 50px;
	text-align: left;
}

Ecco i due risultati
FIREFOX:

INTERNET EXPLORER:


Cosa posso fare per aggiustare il tutto?