Chi mi aiuta a decifrare un po' di css base?

[esacerbare]

Sto leggendo questo esempio:
http://www.html.it/articoli/2880/dr...sempioBase.html
che potete scaricare qui:
http://www.html.it/articoli/2880/drop_dl_all.zip
e leggendo il codice css ci sono delle linee di codice che non riesco a comprendere bene ed avrei bisogno di maggiori delucidazioni.
1)
ul#nav li li{float: none;line-height: 22px;
display:block !important;display: inline; /*IE*/}
I tag <li> interni ai tag <li> che si trovano dentro gli <ul> con id nav contengono i tag <a> oppure dei tag <a> vicino a tag <span> questi ultimi convertiti però in elementi blocco quindi a cosa serve creare degli elementi block oppure degli elementi inline? Qualcuno mi spiega questa questione con qualche esempio per favore?
2)
ul#nav li li a{height:22px} /*fix per IE */
Perché impostare l’altezza del tag <a> quando poco sopra c’è la linea di codice presente al punto 1 di questo post?
3)
ul#nav li.sep span{display: block;height: 1px;overflow: hidden;
margin: 6px 5px 0;background: #CCC}
A cosa serve la definizione ‘overflow: hidden;’, potreste approfondire con un esempio facendomi capire quando effettivamente gioca un ruolo essenziale nel file .css?
4)
Qual'é il significato di .sfhover? Cosa cambia rispetto a :hover?
Sto leggendo un articolo di html e ho letto in una linea di codice:
ul#nav li:hover ul,ul#nav li.sfhover ul{left: -1px;z-index: 100}
Ma che roba é "li.sfhover", non dovrebbe essere semplicemente "li:hover"? Perché se scrivo "li:hover" funziona e se scrivo "li.sfhover" funziona ugualmente?!?!?!
5)
Per testare la bontà del menu in stile facebook sulle varie versioni di internet explorer scaricabile da qui:
http://www.html.it/articoli/2880/drop_dl_all.zip
ho usato questo software:
http://www.my-debugbar.com/wiki/IETester/HomePage
Il risultato è stato negativo per versioni precedenti alla 7 quindi mi chiedevo se la compatibilità alla versione 6 di cui si accennava nella guida fosse una bufala oppure se IETester sia una porcata di applicativo. Voi webmaster di successo, cosa usate per testare una pagina sulle diverse versioni di ie? Anche voi usate ‘l’iconcina mappamondo’ di dreamweaver?
Grazie!

1. P.S.: Spero di trovare più risposte che su html.it... belle le guide ma carente sotto il profilo forum...

[MEMon]

Parto col dirti che i css non sono la matematica, spesso non accade quello che ti aspetti, questo perchè praticamente tutti i browser interpretano i css alla cazzo di cane(chi più chi meno).

1) display:block fa diventare un elemento naturalmente nato come inline(es: span, a, img e tanti altri) come un elemento block(es:div, h1, h2, h3, p ecc ecc), cioè invece di aggiungerlo sulla stessa linea dell'elemento che lo precede, lo piazza nella riga sotto.
Il display:inline fa il contrario.
display:none invece fa scomparire l'elelmento, non viene renderizzato.

2)l'height del punto 1) è riferito all'elemento li, mentre al punto 2) è riferito all'elemento a interno al li. Probabilmente è necessario perchè altrimenti non fa qual che ci si aspetta.

3)overflow serve a dire al browser cosa fare quando il contenuto di certi elementi che permettono overflow(ad esempio un div, o il body stesso) come comportarsi in caso che il contenuto ecceda il contenitore.
Esempio hai un div di dimensioni limitate in altezza, e ci piazzi dentro un testo che eccede tali dimensioni, se attivi l'overflow vedrai comparire la simpatica barra scroller. Con hidden le dici di non farsi mai vedere.

4) .shover è una classe... quando ad un elemento dai una classe

<div class="shover"></div>

per accedere da css a atale elemento( e a tutti quelli che sono div e han la medesima classe) puoi fare

div.shover{
	// css code here
}

5)Io uso IETester e direi che svolge abbastanza bene il suo lavoro.