Diferencias entre Firefox y Explorer

[nusee]

Hola! Disculpen la molestia. Tengo un problema con el Firefox y el Explorer.

Les dejo una imagen para que puedan ver cual es el problema exactamente:

http ://img43.imageshack.us/img43/2233/grafico.jpg - (Por favor unir http con los :)

y el codigo es:

XHTML

<div id="main-content">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="990" height="908">
<param name="movie" value="animation/banner.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="animation/banner.swf" width="990" height="908">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li>|</li>
<li><a href="#">Servicios</a></li>
<li>|</li>
<li><a href="#">Portfolio</a></li>
<li>|</li>
<li><a href="#">Blog</a></li>
<li id="contacto"><a href="#">Contacto</a></li>
</ul>
</div>
<div id="content"></div>
</div>

CSS

*{
padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0px; outline: none;
}

body{
background: url(../images/bg.jpg) repeat-x; background-color: #007aac; font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 12px; line-height: 1.8em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0px;
}

a{
text-decoration: none; color: #fff;
}

#main-content{
width: 990px; height: 100%; margin: 0 auto;
}

#nav{
font-family: Tahoma, Geneva, sans-serif; font-size: 14px; font-weight: bold; color: #fff; width: 400px; position: relative; top: -718px; left: 40px;
}

#nav li{
list-style-type: none; float: left; padding: 3px 3px;
}

#nav a{
display: block;
}

#nav li#contacto a{
background: url(../images/contact-button.png) no-repeat; width: 88px; height: 23px; text-indent: -1000em; margin-left: 8px;
}

#content{
background: url(../images/top-content.png) no-repeat; width: 990px; height: 8px; clear: both; position: relative;
}

La verdad que nose como solucionar estos problemas, estuve probando varias cosas y nada. Es como que hay un problema con los margenes o algo por el estilo.

Como comente anteriormente en algunos posts soy medio nuevo en el tema de diseño web.

Muchisimas gracias a todos!

Suertee!! =)

[hades87]

Antes que anda, decir que se menú que has hecho se puede optimizar bastante a través de CSS, ya que no veo correcto que gastes un li para poner una "|", si quieres te dejo un tutorial de Cristalab donde enseñan a hacer buenos menús con HTML, CSS y listas.

Otra cosa que he visto es que hay un tamaño que es 1.8em. Te aconsejo que siempre uses la misma unidad de medida, ya sean pixeles, em, %.

[pao01]

Te subo la imágen: