Espaçamento lateral com li usando display:inline

[fabioguima 0]

Tenho a seguinte lista

                <div id="menu">
                   <ul>
                       <li><a href="#">Institucional</a></li>
                       <li><a href="#">Agenda</a></li>
                       <li><a href="#">Notícias</a></li>
                       <li><a href="#">Galerias</a></li>
                       <li><a href="#">Parcerias e Convênios</a></li>
                       <li><a href="#">Programas e Projetos</a></li>
                       <li><a href="#">Depoimentos</a></li>
                       <li><a href="#">Articulação Social</a></li>
                       <li><a href="#">Inscrição</a></li>
                       <li><a href="#">Fale Conosco</a></li>
                   </ul>
               </div>

Ele renderiza igualmente no Chrome, Firefox e IE8, porém em todos outros os IEs(6,7,9) ele renderiza diferente, seu tamanho fica menor.

Gostaria de deixa-lá do mesmo tamanho em todos os browsers, como posso fazer isso, alguma ideia?

Código da div e menu

div#menu {  height: 40px; width: 940px; margin: 0 auto; } 
div#menu ul { list-style: none; width: 940px; margin: 0 auto; margin: 0; border-bottom: 2px solid blue; }
div#menu ul li { display: inline; margin: 0; line-height: 40px; margin: 1px;}
div#menu ul li a:hover { background: white; margin: 5px;}

[William Bruno 1501]

que tal você usar float: left; no lugar do display: inline; ?

 

ou então, já ouviu falar do display: inline-block; ?

:lol: