Margin / Padding / Line-height problems in IE8

[buthy]

Hello, i'm having problems in IE8... Look:

Chrome, IE9, Firefox
[img]http://www.grupoamigobicho.com.br/outros.png[/img]

IE8:
[img]http://www.grupoamigobicho.com.br/ie8.png[/img]

CSS:
header#topo nav#menu {width: 100%; height: 70px; background: #b0dcfb;}
header#topo nav#menu li {height: 70px; line-height: 70px; display: block; text-align: center; float: left; margin: 0; padding: 0; font-family:"BeautifulEveryTime"; font-size:20px;}
header#topo nav#menu li a {text-decoration: none;}
header#topo nav#menu li.i1 {width: 100px;}
header#topo nav#menu li.i2 {width: 150px;}
header#topo nav#menu li.i3 {width: 150px;}
header#topo nav#menu li.i4 {width: 110px;}
header#topo nav#menu li.i5 {width: 120px;}
header#topo nav#menu li.i6 {width: 120px;}
header#topo nav#menu li.i7 {width: 120px;}
header#topo nav#menu li.i8 {width: 123px;}
header#topo nav#menu li.selected {background: url('../images/menu-selected.png') no-repeat center 59px;}
header#topo nav#menu li:hover {background: url('../images/menu-selected.png') no-repeat center 59px;}
header#topo nav#menu .menu-separador {width: 1px; height: 70px; display: block; background: url('../images/menu-separador.png') no-repeat top center; float: left;}

HTML:

        <div class="centro">

            <ul>

                <li class="i1 <?php if (!isset($_GET['pag'])){ echo 'selected'; } ?>">
                    <a href="index.php">HOME</a>
                </li>

                <div class="menu-separador"></div>

                <li class="i2 <?php if (($_GET['pag']) == 'sobre-a-ong'){ echo 'selected'; } ?>">
                    <a href="index.php?pag=sobre-a-ong">SOBRE A ONG</a>
                </li>

                <div class="menu-separador"></div>

                <li class="i3 <?php if (($_GET['pag']) == 'como-ajudar'){ echo 'selected'; } ?>">
                    <a href="index.php?pag=como-ajudar">COMO AJUDAR</a>
                </li>

                <div class="menu-separador"></div>

                <li class="i4 <?php if (($_GET['pag']) == 'adote'){ echo 'selected'; } ?>">
                    <a href="index.php?pag=adote">ADOTE</a>
                </li>

                <div class="menu-separador"></div>

                <li class="i5 <?php if (($_GET['pag']) == 'noticias'){ echo 'selected'; } ?>">
                    <a href="index.php?pag=noticias">NOTÍCIAS</a>
                </li>

                <div class="menu-separador"></div>

                <li class="i6 <?php if (($_GET['pag']) == 'eventos'){ echo 'selected'; } ?>">
                    <a href="index.php?pag=eventos">EVENTOS</a>
                </li>

                <div class="menu-separador"></div>

                <li class="i7 <?php if (($_GET['pag']) == 'produtos'){ echo 'selected'; } ?>">
                    <a href="index.php?pag=produtos">BRECHÓ</a>
                </li>

                <div class="menu-separador"></div>

                <li class="i8 <?php if (($_GET['pag']) == 'contato'){ echo 'selected'; } ?>">
                    <a href="index.php?pag=contato">CONTATO</a>
                </li>

                <div class="clear"></div>

            </ul>

        </div>

    </nav>

JS:

<script type="text/javascript" src="js/cufon.yui.js"></script> <script type="text/javascript" src="js/Beautiful_Every_Time_400.font.js"></script> <script type="text/javascript"> Cufon.replace('h1,h2,h3'); Cufon.replace('nav#menu ul li a'); Cufon.replace('.titulo-adote'); Cufon.replace('.fonte'); Cufon.replace('.caption'); </script>

What I need to do to align the menu?

Thanks!