Problema Menu con IE6

[redmile]

Problema Menu con IE6

Ciao a tutti, come da titolo ho il problema di far visualizzare bene un menu ad ie6. Ecco come viene visualizzato:
img828.imageshack.us/img828/1877/renderie6.png

mentre negli altri browser così:
img828.imageshack.us/img828/261/renderyn.png

di seguito i codici html e css

<div id="menu">
    <ul>
        <li class="home"><a href="/">Home</a></li>
        <li><a href="chi.html">Chi siamo</a></li>
        <li><a href="dove.html">Dove siamo</a></li>
             <li><a href="servizi.html">Servizi</a>
                <ul>
                    <li><a href="pdf/carta_servizi.pdf">Carta servizi</a></li>
                    <li><a href="pdf/regolamento.pdf">Regolamento</a></li>
                    <li><a href="#">Mod. Alzheimer</a></li>
                </ul>
            </li>       
        <li><a href="attivita.html">Attività</a></li>       
        <li><a href="formazione.html">Formazione</a></li>       
        <li><a href="progetti.html">Progetti</a></li>       
        <li><a href="foto.html">Foto</a></li>       
        <li><a href="video.html">Video</a></li>       
        <li><a href="giornalino.html">Giornalino</a></li>       
        <li><a href="contatti.html">Contatti</a></li>
    </ul>
</div>

#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;
box-shadow: 2px 2px 2px;
background: url(images/menu.png) repeat-x;
}

text-align:center;
z-index:2;
padding:0;
}

font: 16px 'TitilliumText22LMedium', Arial, sans-serif;
position: relative;
float: left;
list-style: none;
margin-bottom:10px;
padding:0;
}

font: 16px 'TitilliumText22LMedium', Arial, sans-serif;
margin:0;
display: block;
text-decoration:none;
text-align: center;
line-height: 50px;
color: white;
z-index:2;
display: block;
}

position: absolute;
top: 50px;
visibility: hidden;
background-color: #63a32c;
width:125px;
-moz-box-shadow: 2px 2px 2px;
-webkit-box-shadow: 2px 2px 2px;
box-shadow: 2px 2px 2px;

}

margin:0;
text-transform:none;
font-size: 14px;

}

margin:0;
padding: 0 10px;
text-transform:none;
font-size: 14px;
}
ul ul li a:hover{
text-decoration:underline;
}

visibility:visible;
}

[prill]

Ciao redmile, il codice da te riportato è incompleto, e provato così com'è sembra sia reso allo stesso modo sui vari browser, anche ie6, rispettando il float senza andare a capo. Sarebbe utile vedere il codice nella sua interezza, magari direttamente in funzione sulla tua pagina. Ti segnalo intanto l'assenza del ; (punto e virgola) dopo "behavior:url(PIE.htc)"

[redmile]

grazie per la segnalazione, avevo già provveduto cmq

si il codice è incompleto perchè ho tolto quello degli "span" che utilizzo per separare i vari< li>. Il sito è @asisanpa@[email protected] (con le o al posto delle @)

[prill]

Con Explorer7 non visualizzo la barra, con il 6 il problema è legato proprio allo span "divisore". Ora devo chiudere, riguarderò se possibile iù tardi

[redmile]

grazie, quello che vorrei a sto punto è togliere i vari span dall'html ed usare un bordo sinistro per ogni <li> (ad eccezione del primo) come separatore e con altezza pari al font. Il tutto ovviamente cross-browser

[prill]

Certo, l'eliminazione delle voci che non hanno altra funzione che quella di incorporare la barretta è la soluzione migliore, eviterai così inutile codice di marcatura. Basterà assegnare ai link un padding e un'immagine di sfondo non ripetuta e allineata a destra (per l'ultimo link, potrai creare una classe diversa priva dello sfondo poiché lì la barretta non serve)