1
2
4
3
7

Si vuole che sia i tabs che il contenitore abbiano padding e border.

1: A e' inline con padding e border, LI e' float ed ha padding verticale per racchiudere A, UL e' float per racchiudere gli LI ed ha border.

2: A e' block (riduce problemi di inclusione) con padding e border ed e' float altrimenti IE/Mac non shrinka LI, LI e' float, UL e' float per racchiudere gli LI ed ha border.

3: A e' inline con padding e border, LI e' inline, UL e' block ed ha padding verticale per includere gli A, ed ha border (white space va eliminato.)

4: A e' block (riduce problemi di inclusione) con padding e border ed e' float altrimenti IE/Mac non shrinka LI, LI e' float, (UL non gioca alcun ruolo), LI ed un clearing BR sono racchiusi da un contenitore che ha border.

7: Come 3, ma LI e' inline-block per IE5/Mac

1 e 2 non vanno in Op7: UL float senza width shrinka piu' che con gli altri browser, portando gli LI in verticale (corretto in 8+.) Si potrebbe risolvere con una width su UL, ma 100% genera scrollbar orizzontali a causa di border. Se non si richiede background (rosa) e bordo (rosso) di diverso colore si potrebbe usare padding verticale su UL e margine destro su ultimo LI.
Comunque meglio evitare float su UL, aggiungere un oggetto "clear" dopo UL e racchiudere tutto in un contenitore. E' 4. Opportuno anche per avere background su 100% width. Questo metodo per avere il contenitore che racchiude i float avrebbe problemi in IE/Win, che si risolvono con hasLayout.

Inclusione di un elemento inline con padding e border (1, 3, 5) da parte di un block non e' realizzabile con precisione (almeno in alcuni browser, non IE). Le discrepanze non si notano se background e bordo di contenitore hanno lo stesso colore. Motivo delle discrepanze: padding e border di inline sono aggiunti a content area e non aumentano l'altezza delle line box. Il meglio che si puo' fare e' dare a block contenente padding uguale a padding+border dell'inline. Ma questo padding si somma a line-height dell'inline (qui normal), quindi c'e' discrepanza in tutti i casi in cui altezza content area e' diversa da line-height normal.

Box su elementi inline hanno strano problema in IE6/Win (non in IE5.5-): quando non c'e' abbastanza spazio orizzontale l'ultimo/primo perde padding e border right/left.

3 in IE/Mac: esce sulla "destra" (e' right aligned il testo "escluso" padding e border right), e ci sono problemi con hover, come se le zone "sensibili" fossero replicate allineate a sinistra.

5 e 6 sono come 3 e 4, ma left

8: A e' inline con padding e border, LI e' inline, UL e' block ed ha padding verticale per includere gli A, ed ha border, text-align: center

9: A e' block con padding e border (ed e' float altrimenti IE/Mac non shrinka LI), LI e' float (inline-block per IE/Win e IE5/Mac), UL e' display:table per includere float e centrare orizzontalmente (inline-block dentro un contenitore con text-align: center per IE)

10: Analogo a 9. Alcune proprieta' distribuite diversamente tra contenitore ed ul, per avere background (e bordo esterno) su width 100%

5
6
8
9
10
 

CSS tests home