CSS, Firefox, IE e Opera

[theyonut]

Salve,

volendo creare un sito, e non avendo ancora conoscenze di java o flash, ho deciso di fare il menu di navigazione con i CSS.

Il menu è formato da una <div> con una lista <ul> dentro:

<div id="menu">
<ul>
 <li><a href="index.html"><span class="menu">Home</span></a></li>
 <li><a href="url1"><span class="menu" target="_blank">Link1</span></a></li>
 <li><a href="url2"><span class="menu">Link2</span></a></li>	
</ul>
</div>

e lo "stilizzato" con il seguente css:

@charset "UTF-8";
#menu{
height:   35px;
display: block;
padding: 0px;
margin-left: auto;
margin-right: auto;

}
div#menu{
width: 500px;
height: 35px;
margin: 0 auto;
}
#menu > ul{
list-style: inside none;
padding: 0px;
margin: 5px;
}
#menu > ul >li{
list-style: inside none;
display: block;
position: relative;
padding: 0px;
margin: 0px 5px 0px 5px;
float: left;
border-right: solid 2px #000;
border-left: solid 2px #000;
border-radius: 2em;
-moz-box-shadow: 5px 5px 2px #333333;
 -webkit-box-shadow:5px 5px 2px #333333;
box-shadow: 5px 5px 2px #333333;

}
#menu > ul >li >a{
outline: none;
display: block;
position: relative;
padding: 15px 20px;
font: bold 15px/100% verdana, helvetica, arial, sans-serif;
text-decoration: none;
text-align: center;
}
#menu > ul > li > a > span{
position: relative;
}
#menu >ul >li >a:link, #menu >ul >li >a:visited{
color: #fff;
}
#menu >ul >li>a:hover, #menu >ul >li>a:active{
color: #f00;
background-color: #000;
border-radius: 2em;
border-style: Outset;
border-color: #fff;
}

Il problema è che funziona solamente in Chrome, Safari e il browser integrato di android gingerbread, mentre in Firefox, IE e Opera non ne vuole proprio sapere. Mi mostra solo una lista di link in verticale non stilizzata.

Quando ho scritto il codice ho cercato w3schools.com le compatibilità dei vari attributi.

Prima di continuare, vorrei risolvere questo problema di compatibilità.

Secondo voi cosa non funziona?

Il codice html e quello css sono validi. Validati con w3c validator.

[karmax]

sulla guida di html.it, per ogni funzione che usi c'è una tabella delle compatibilità con i vari browser.

Prova a vedere lì!

[theyonut]

Le ho già verificate con w3schools.com e l'unica cosa che non dovrebbe tornare, dovrebbe essere l'ombra dei tasti, ma questo solo in Internet Explorer che non supporta le animazioni CSS. Ma negli altri browser dovrebbe funzionare :mad:

[pix]

il codice non pare avere errori.

se potessi mettere online la pagina completa sarebbe meglio.

[Junior]

Qualche warning o errore nella console di Firefox?