Problema visualizzazione con IE di un menu CSS

[Mediolego]

Ciao a tutti,
recentemente ho creato un menù in CSS per il mio sito, soltanto che con google chrome viene visuualizzato perfettamente, mentre su IE viene tutto falsato, vedi sotto.

Vi posto prima di tutto l'html

<link href="styles.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>


<ul>
<li class='active '><span>HOME</span>
<li class='has-sub '><span>LEGO</span>
<ul>[*]<span>Castle</span>[*]<span>Kingddoms</span>[/list]
[*]<span>Castelli</span>[*]<span>Contatti</span>[/list]
</div>

E questo è il CSS:

#cssmenu{ height:37px; display:block; padding:0; margin:20px auto; border:1px solid; border-radius:5px; } #cssmenu > ul {list-style:inside none; padding:0; margin:0;} #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } #cssmenu > ul > li.has-sub:hover > a:before{top:19px;} #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } #cssmenu ul li > ul{width:200px;} #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top, #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top, #3e698c 0%,#30576e 100%); filterrogidXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); } #cssmenu{border-color:#1b313d;} #cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;} #cssmenu > ul > li > a:after{border-color:#6696bd;} #cssmenu > ul > li > a:hover{background:#436f93;}

Che cos'è che dovrei fare per fare in modo che venga visualizzato anche su IE? Grazie

[Mediolego]

qui il sito

[scimmiaparlante]

non so se ci sono altri problemi ma quando avevo provato a farlo su IE non funzionava se non ci mettevo il doctype (in quel caso html4 transitional).

Prova tanto non costa nulla

[Mediolego]

Infatti era quello il problema, sono 3 ore che giro a cercare guide e soluzioni pitagoriche quando sono andato su un sito ed ho provato per vedere se poteva essere quello il problema, comunque grazie mille, ora sia con ie che con chrome o firefox dovrebbe fungere bene

prova

Adesso posso dormire tranquillo

[Mediolego]

Anche se non è fondamentale, se vedete il mio menu, sarebbe meglio se fosse un pò distaccato dai margini, su quale proprietà dovrei lavorare secondo voi?

[scimmiaparlante]

Infatti era quello il problema, sono 3 ore che giro a cercare guide e soluzioni pitagoriche quando sono andato su un sito ed ho provato per vedere se poteva essere quello il problema, comunque grazie mille, ora sia con ie che con chrome o firefox dovrebbe fungere bene

Lo so è capitato anche a me

Anche se non è fondamentale, se vedete il mio menu, sarebbe meglio se fosse un pò distaccato dai margini, su quale proprietà dovrei lavorare secondo voi?

prova a dare al div contenente il menù del margin left e right

[Mediolego]

grazie del consiglio,
ho lavorato sul margin nelle proprietà css del menù, prima il codice era stabilito "auto" cioè si adattava al browser automaticamente a 20px di margine al top, cosa che non è indispensabile, invece adesso gli ho dato un pò di margine anche laterale e mi sembra perfetto come menù, ora posso aggiungere sottomenu etc..
In explorer però non si vede lo smussamento degli angoli, ma per quello credo non ci si possa fare ancora molto fino alla prossima versione CSS dico male?
grazie ancora dell'aiuto

[scimmiaparlante]

se cerchi su google ci sono dei modi per farcelo funzionare

cerca:
bordi arrotondati su ie/explorer
border radius ie/explorer
...

[Mediolego]

Ciao, ho seguito il tuo consiglio.
Mi sono documentato ed ho trovato anche delle soluzioni qui sul forum.
Praticamente il modo esiste, per amor del cross-browser mi sono messo a lavoro, ho trovato la soluzione con un .htc creato apposta per questo problema.
Dopo ore di lavoro sono riuscito a farlo funzionare con gli appositi collegamenti, solo che nonostante ci sia riuscito, il file non lavora nel punto giusto (ossia sul menu) ma ricrea un altro menu arrotondato in cima alla pagina, non conoscendo bene il css non saprei dove forzare il codice per adeguarlo alla mia esigenza.
Se vai su mio sito noterai che con ie è tutto sfasato, cosa posso fare?

[Mediolego]

Questo è il codice del .css

#cssmenu
{ height:37px; display:block; padding:0;
margin-top:20px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
border:1px solid; border-radius:5px;
behavior: url(http://mediolego.altervista.org/first/PIE.htc);}

In rosso ho evidenziato la funzione che permette la visualizzazione su IE, che non sia compatibile con i margin?