Su firefox e chrome funziona su Exploer 7 viene tutto impaginato male e non funziona neanche!..

CSS:

codice:

div#menu{ height:50px; width:120px; margin-left:0px;}
div#navigation{width: 120px;height: 35px;margin-top: 20px}
div#navigation ul{list-style-type: none;margin: 0;padding: 0}
div#navigation li{float: left;margin: 0 3px 0 0;padding: 1px 5px 15px 5px}
div#navigation a{display: block;width: 120px;line-height: 30px;text-decoration: none;
    border: 1px solid #666;background: url("sfondocombinato.jpg") lightgray no-repeat top left;
    color: #333;font-variant: small-caps;text-indent: 27px}
div#navigation a:hover{background-position: -130px 0;color: #336}
div#navigation li#activelink a,div#navigation li#activelink a:hover{
    background-position: -260px 0;color: #fff}


html,body{margin:0;padding:0}
body{font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
   background: url(mare.jpg) repeat;}
h1{margin: 0;padding: 10px 10px 10px 10px;font-size: 300%;color: aquamarine; text-align: right}
h2 {margin:0;padding-left: 5px;padding-top: 15px; line-height: 30px;color: #333}
h3,h4{margin:0;padding-left: 5px; line-height: 30px;color: #333}
h2{font-size: 160%}
h3{font-size:130%}
h4{font-size:120%}
p{margin: 0 5px;padding: 5px 0 0.7em}
div#container{width:760px;margin: 0 auto;
   background: #FFFFCC;color: #555;text-align:center;  }
div#header{background: url(alberi.jpg) no-repeat center left #3366CC; }
div#main{float:left;width:540px}
div#content{float:right;width:400px}
div#nav{float:left;width:140px;font-size:85%}
div#extra{float:right;width:220px;font-size:95%}
div#footer{clear:both;width:100%;padding-top:5px;background: aqua; color: black}
HTML (con un php in mezzo ma non incide sul problema ed è indifferente (semplice condizione che se risulta true inserisce tag html: id='activelink')):

codice:
<div id="navigation">
         <ul>
            <li <?php if($pagina == "home") echo "id='activelink'>"; ?>HOME
            <li <?php if($pagina == "mare") echo "id='activelink'>"; ?>Spiaggia e mare
            <li <?php if($pagina == "appartamenti") echo "id='activelink'>"; ?>Appartamenti
            <li <?php if($pagina == "servizi_divertimenti") echo "id='activelink'>"; ?>Divertimenti
            <li <?php if($pagina == "itinerari_turistici") echo "id='activelink'>"; ?>Itinerari
            <li <?php if($pagina == "feste_sagre") echo "id='activelink'>"; ?>Feste e sagre
            <li <?php if($pagina == "storia") echo "id='activelink'>"; ?>Storia
            <li <?php if($pagina == "dove_siamo") echo "id='activelink'>"; ?>Dove siamo
            <li <?php if($pagina == "prenotazioni") echo "id='activelink'>"; ?>Info[/list]
     </div>
Stiamo parlando di un semplice Menu a tre stati preso da qui: http://css.html.it/articoli/leggi/37...oad-via-css/3/

Potete aiutarmi ?

Rispetto all'orignale l'ho un pò modificato nel senso che ho cambiato un pò il width di vari elementi e invece che farlo orizzontale l'ho fatto verticale..
Dove è l'errore che exploer me lo fa vedere sfasciato mentre con firefox funziona ?

Grazie anticipatamente

PS. Con Firefox 3.0.13 funziona alla perfezione!..