Scrolling inaspettato

[grandemedia]

Salve a tutti,
ho un problema con uno scrolling inaspettato

#header {width: 1012px; height: 125px; position: relative; z-index: 10; overflow: auto; margin: 15px auto 0 auto;}
#header .menu {width: 1012px; height: 35px; position: relative; float: left; z-index: 20; overflow: auto; background: #222;}
#header .menu ul {height: 35px; list-style: none; float: right; margin: 0 10px 0 0; padding: 0;}
#header .menu ul li {height: 35px; line-height: 35px; margin: 0 0 0 10px; list-style: none; float: right; padding: 0; border: 1px oli}
#header .menu ul li a {font-family: Tahoma; color: #fff; font-weight: bolder; text-decoration: none; font-size: 11px;}

e questo il codice html

<div class="menu">
				<ul>
					[*][url="#"]TESTO 1[/url]
					[*][url="#"]TESTO 2[/url]
					[*][url="#"]TESTO 3[/url]
				<ul>
<div>

il problema sta in #header .menu ul li a ... se assegno una dimensione da 12px in su al font mi si presenta uno scrolling verticale dell'ul. Non ha senso visto che il "pezzo" e' alto 35px.

Qualche idea?
Grazie in anticipo.

[Prill]

Le voci elenco sono alte 35 pixel, più 2 di bordo (1 bordo superiore e 1 inferiore) e fanno 37, su ul e div menu è impostata un'altezza di 35...

[grandemedia]

Originariamente inviato da Prill
Le voci elenco sono alte 35 pixel, più 2 di bordo (1 bordo superiore e 1 inferiore) e fanno 37, su ul e div menu è impostata un'altezza di 35...

Ho copiato il codice errato.
La linea corretta sarebbe

#header .menu ul li a {font-family: Tahoma; color: #fff; font-weight: bolder; text-decoration: none; font-size: 11px;}

E cosi' non fa scrolling. Se imposto font-size: 12px; ecco che inizia lo scrolling.

[Prill]

Il problema appare su firefox anche con il carattere di 11 pixel. L'altezza dell'elenco e del menu è inferiore di 2 pixel rispetto a quella delle voci elenco. I bordi, così come i padding o i margini, si sommano alla larghezza e all'altezza degli elementi cui sono applicati, le tue li sono alte pertanto 37 pixel, così dovrebbe essere per ul e div menu

[grandemedia]

Originariamente inviato da Prill
Il problema appare su firefox anche con il carattere di 11 pixel. L'altezza dell'elenco e del menu è inferiore di 2 pixel rispetto a quella delle voci elenco. I bordi, così come i padding o i margini, si sommano alla larghezza e all'altezza degli elementi cui sono applicati, le tue li sono alte pertanto 37 pixel, così dovrebbe essere per ul e div menu

Forse sono fuso io ma se ho un div alto 35px, un ul alto 35px ed un li alto 35px. Tutti senza bordi, margin 0 e padding 0 (almeno in altezza), capisco dove saltino fuori i 2px in piu'. Calcolando che il primo codice e' stato rettificato con il mio precedente post.

[grandemedia]

Ho messo il div menu alto 37 e funziona. Ma non capisco veramente il motivo di questi due px.

[Prill]

hai un "border:1px solid" quindi un bordo di 1 pixel su ciascun lato, in alto, a destra, in basso e a sinistra, perciò 35+1+1

[grandemedia]

Originariamente inviato da Prill
hai un "border:1px solid" quindi un bordo di 1 pixel su ciascun lato, in alto, a destra, in basso e a sinistra, perciò 35+1+1

Quel codice era errato. Quello giusto e':

#header .menu ul {height: 35px; list-style: none; float: right; margin: 0 10px 0 0; padding: 0;}
#header .menu ul li {height: 35px; line-height: 35px; margin: 0 0 0 10px; list-style: none; float: right; padding: 0;}
#header .menu ul li a {font-family: Tahoma; color: #fff; font-weight: bolder; text-decoration: none; font-size: 13px; padding: 0; margin: 0;}

Eppure ha ancora lo scrolling.

[Prill]

Puoi spostare il line-height di "li" su "a", oppure lasciarlo dov'è e aggiungere sui link un line-height:100%. Il problema sembra dovuto alla presenza del grassetto che in qualche maniera sfasa l'altezza delle righe (a me accade con Firefox con carattere di 15 pixel)

[AlbeBeer]

Nella classe menu hai un overflow: auto di troppo.
Con questa proprietà se il contenuto supera le dimensioni del contenitore viene visualizzata la scroll bar verticale e/o orizzontale a seconda dei casi...
Io non la utilizzerei...
Sul motivo per cui il contenuto superi le dimensioni del contenitore ti rimando ad un più approfondito studio del box model...