[css] menu

[blur]

buongiorno!

dunque ho questo menu in css:

body {
font:12px verdana, helvetica, sans-serif;text-align:left
}
h6 { font-size:1em;
font-weight:bold;margin:2px 0;
padding:.3em 0em;
}
ul.menu1 { 
width:160px;
list-style:none; 
margin:0; padding:0; 
border:1px solid #ccc; 
}
ul.menu1 li a { 
display:block; 
text-decoration:none; 
padding:0 1em; 
height:2em;line-height:2em; 
}
ul.menu1 li { display:inline } 
ul.menu1 li a:link, ul.menu1 li a:visited { 
background:#FAFAFD;
color: #000;
} ul.menu1 li a:hover, ul.menu1 li a:active { 
background: #ccc;
color:#c00;
}

quando la lunghezza del link supera la larghezza (160px) del menu, ovviamente va a capo, solo che crea un'interlinea, come se fosse un'ulteriore voce di menu, abbastanza brutto da vedere.
c'è un modo per eliminare quell'interlinea?
grazie
ciauz

[Marcolino's]

Il problema è dovuto più che altro al fatto che dando height e lineheight: 2em, ogni volta che vai a capo la seconda riga è alta altri 2em.
Non penso che tu ci possa fare qualcosa, tranne dare anche la larghezza del menù in percenti.
Quindi invece di 160px, usare una misura tipo 6em, solo che stavolta invece di andare a capo, ti allunga tutto il menù, e addio layout.
Il problema che hai sollevato è una storia vecchia e la soluzione è quella di stare attento alla lunghezza delle voci, non credo ci sia altra soluzione.