Problema di visualizzazione in IE8

[marc78]

Problema di visualizzazione in IE8

Salve a tutti

Sto facendo un sito per la mia ragazza ma ho trovato un problema nell'eseguirlo in IE8, vi spiego il problema:

Il sito e largo 960 px, ho posizionato un menu largo 940, ad ogni voce del menu (ogni link) gli ho impostato un padding di 17px, tutto questo funziona in FF3 e Chrome ma se vado in IE8 l'ultima voce del menu mi va a capo.

Ho provato a vedere in giro se esiste un Hack per questo problema ma non ho trovato nulla.
Potete darmi un aiutino?

Vi posto i codici.

HTML

<div id="wrapper">
        <div id="main">
            <div id="header">
                <div id="logo"><h1><a href="#"><img src="images/logo.gif" /></a></h1></div>
                <div id="verde"><img src="images/verde.gif" /></div>
                <ul class="menuservice">
                    <li><a href="#" class="menu">Dove Siamo</a></li>
                    <li><a href="#">Trasparenza</a></li>
                    <li><a href="#">Contatti</a></li>
                    <li><a href="#">Job</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
                <div id="reset"></div>
                <ul class="menu">
                    <li class="primo"><a href="#">Cessione del quinto</a></li>
                    <li><a href="#">Prestito delega</a></li>
                    <li><a href="#">Prestito vitalizio</a></li>
                    <li><a href="#">Prestito personale</a></li>
                    <li><a href="#">mutui</a></li>
                    <li class="ultimo"><a href="#">assicurazioni</a></li>
                </ul>
                <div id="reset"></div>
            </div> <!-- fine header -->

CSS

/* Box model */
#reset{clear:both;}
#content {padding-top:20px;}
#wrapper{margin:0 auto; width:960px; padding-top:30px;  }
#main {padding:10px; background:#FFF url(images/bck-top.gif) top no-repeat;}
#logo{float:left;}
#verde{ float:right;}
#slide {float:left;}

l.menuservice{float:right; width:100%; margin-bottom:20px;}
ul.menuservice li {float:right;}
ul.menuservice li a {text-decoration:none; display:block; padding:5px; color:#e21e26;}
ul.menuservice li a:hover {text-decoration:underline;}
ul.menu li {float:left}
ul.menu li a {display:block; text-transform:uppercase; text-decoration:none; color:#fff; padding:10px 17px; background:#ce0101 url(images/bck-menu.gif) repeat-x top; font-size:110%; border-right:1px solid #da170f;}
ul.menu li.ultimo a {border-left:none 0; padding-left:27px;}
ul.menu li a:hover { background:#fe3d27 url(images/bck-menu_hover.gif) repeat-x top;}