Problemas com menu CSS usando UL e LI

Hola pessoa,

tenho um probleminha aqui: tenho um menu feito utilizanod ul e li e notei que ele não funciona corretamente no firefox, apesar de estar exatamente como eu quero no internet explorer, gostaria de receber alguma luz de alguem que entende mais q eu na parada.

Segue o código do menu e o css para analizarem.

HTML DO MENU

<div id="menu_superior">
 <ul id="linha">
 <li><a href="lista_publicacoes.php" id="href_publicacoes" title="veja suas publicações">publicações</a></li>
 <img src="img/separador_menu_superior.gif">
 <li><a href="servicos.php" id="href_servicos" title="confira os serviços oferecidos">serviços</a></li>
 <img src="img/separador_menu_superior.gif">
 <li><a href="ajuda.php" id="href_ajuda" title="perguntas frequentes">ajuda</a></li>
 <img src="img/separador_menu_superior.gif">
 <li><a href="meus_dados.php" id="href_dados" title="">meus dados</a></li>
 <img src="img/separador_menu_superior.gif">
 <li><a href="fale_conosco.php" id="href_fale" title="fale com ">fale conosco</a></li>
 <img src="img/separador_menu_superior.gif">
 </ul>
</div>

div#menu_superior {

 width: 700px;
 height: 90px;
 float: right;
	}

	div#menu_superior ul#linha
	{
 list-style-image: none;
 list-style-type: none;
 clear: both;
 margin: 0 5px;
	}

	div#menu_superior ul#linha {
 height: 40px;
 border-bottom: 0px solid #ccc;
	}

	ul#linha li { margin-top: 15px }

	div#menu_superior li,
	div#menu_superior a { display: block; float: left; }

	div#menu_superior a {
 height: 20px;
 text-decoration: none;
 border-right: 1px solid #ccc;
	}

div#menu_superior a#href_publicacoes { width: 78px; background-color:#ccc; }
div#menu_superior a#href_servicos { width: 50 px; background-color:#ccc; }
div#menu_superior a#href_ajuda { width: 35px; background-color:#ccc; }
div#menu_superior a#href_dados { width: 80px; background-color:#ccc; }
div#menu_superior a#href_fale { width: 85px; background-color:#ccc; }