Ciao a tutti
allora il problema è il seguente, ho un menu in css con sottomenu al passaggio del mouse che sugli altri browser funziona mentre su ie6 no. L'altro problema è che per distanziare i vari collegamenti ho impostato un bordo sinistro per ogni[*] , solamente che avendo una interlinea di 50px (altezza del div che contiene l'ul) i bordi risultano troppo alti. Ecco il codice:
HTML
CSS
codice:
#menu{
behavior:url(PIE.htc)
text-align: center;
z-index: 2;
padding:0;
height:50px;
-moz-border-radius: 10px;
border-radius: 10px;
webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 2px #333;
-webkit-box-shadow: 2px 2px 2px #333;
box-shadow: 2px 2px 2px #333;
background: url(images/menu.png) repeat-x;
}
#menu ul{
text-align:center;
z-index:2;
padding:0;
}
#menu li{
font: 16px 'TitilliumText22LMedium', Arial, sans-serif;
position: relative;
float: left;
list-style: none;
padding:0 .5em;
border-left:1px solid white;
margin-bottom:10px;
line-height:50px;
}
#menu li a{
font: 16px 'TitilliumText22LMedium', Arial, sans-serif;
margin:0;
display: block;
text-decoration:none;
text-align: center;
color: white;
z-index:2;
display: block;
white-space: nowrap;
line-height:50px;
}
#menu li a:hover {text-decoration:underline;}
#menu ul ul{
position: absolute;
top: 50px;
visibility: hidden;
background-color: #63a32c;
-moz-box-shadow: 2px 2px 2px #333;
-webkit-box-shadow: 2px 2px 2px #333;
box-shadow: 2px 2px 2px #333;
}
#menu ul ul li{
margin:0;
text-transform:none;
font-size: 14px;
}
#menu ul ul li a{
margin:0;
padding: 0 10px;
text-transform:none;
font-size: 14px;
}
#menu ul ul li a:hover{
text-decoration:underline;
}
#menu ul li:hover ul{
visibility:visible;
}
Questo è il risultato finale

io vorrei le barrette alte quanto il carattere