Esempio di menu con class active su A e div di contenimento floattato a sinistra con ampiezza 30% e UL portata al 100%. Il titolo h4, presente per ragioni di accessibilità, è stato spostato fuori dal viewport.

Inoltre, per evitare problemi di ampiezza, è conveniente spostare il bordo della UL (se presente) sul contenitore, in modo da non incorrere in aumenti dell’ampiezza complessiva, come prevede il box model, con ampiezza della UL che così supererebbe il 100%. Vedere il codice CSS per dettagli.

I gap sono risolti in IE 5.5 e 6 grazie ai bordi introdotti, che attivano qui hasLayout. Ma il problema continua ad essere un fastidioso gap (uno spazio) fra gli LI solo in IE7 (che è più recente!), oltre che in IE 5.0.

Notate come cambia questo effetto in questi due browser con il seguente cambio di markup: sono stati eliminati gli a capo nell’HTML. Il CSS è lo stesso!! L’effetto è causato dalla presenza di min-height (_ma vale anche per height: solo che height funziona male quando il testo è più lungo e va su due righe, che può succedere se il menu è generato dinamicamente_) da solo in contemporanea con line-height. Se si eliminano il problema sembra scomparire

Queste proprietà che hanno senso per molte buone ragioni, primo fra tutte controllare l’altezza del tasto. L’alternativa è eliminare del tutto queste proprietà e ricorrere solo al padding su LI A. Non sempre la cosa è desiderabile. Oppure usare width: 100% sempre su LI A, anche questo non sempre compatibile con padding e altre necessità. Un’altra soluzione definitiva è usare la solita tecnica del FNE(Float Nearly Everything), che elimina questo genere di problemi.