Decallage Liste entre Navigateur :(

bonjour, j'ai un petit problème.

mon menu est une liste.

je l’aligne en bas avec un margin-top, j'ai l 'impression que suivant le navigateur l'espacement en les li n'est pas le même.

Comment faire pour avoir atteindre mon objectif ?

CODE HTML:

div id="banner">
    <div id="logo"></div>
            <div id="menu">
                <ul>
                    <li><a href="index.php">NEWS</a></li>
                    <li><a href="news">VIDEO</a></li>
                    <li><a href="news">PHOTOS</a></li>
                    <li><a href="bio">BIO</a></li>
                    <li><a href="news">FACEBOOK</a></li>
                    <li><a href="news">TWITTER</a></li>
                    <li><a href="lien">LIENS</a></li>
                    <li><a href="contact">CONTACT</a></li>
                </ul>
            </div>

voici mon code CSS:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
a{text-decoration:none;color:black;}
body{text-align:center; font-family:verdana; font-size:12px; min-width:1000px;}
a:hover {
    text-transform: none;
    text-decoration: none;
    background-repeat: no-repeat;
    color: #e2007a;
}
.space
{
margin-left: 26px;
display: block;
}   
body {
font-family: Arial, trebuchetMS, sans-serif;
font-size: medium;
font-size: 12px;
}
#banner{
width: 1088px;
height: 130px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
#logo{height: 130px;width: 92px;background-image: url("img/logobw.png");float: left;margin-right: 4px;margin-top: 6px;}
#menu{float: left;margin-right: 10px;width: 65px;text-align: left;font-size: 13px;margin-top: 15px;}
#menu ul li{list-style: none;}

Merci :)