A ver estuve probando y modifique también tu html (semánticamente los enlaces de un menú van en una lista desordenada y parece que ya se ve bien en los dos navegadores:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="estilos.css" rel="stylesheet" type="text/css" />
<li><a href="#">INICIO
</a></li> <li><a href="#">SERVICIOS
</a></li> <li><a href="#">TIENDA
</a></li> <li><a href="#">CONTACTAR
</a></li> <p>Texto de muesta para ver la sombra que se pone detr
ás cuando el fondo est
á claro
</p>
Código CSS:
Ver original@charset "utf-8";
/* CSS Document */
body {
font-family:"Myriad Pro", Myriad, Geneva, Arial, Helvetica, sans-serif, Verdana;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image:url(img/bg.jpg);
background-position:top;
background-repeat:no-repeat;
background-color:#000000;
color:#CCCCCC;
text-shadow: 2px 2px 2px #000;
}
#content{
margin:auto;
top:0px;
width:980px;
}
#header{
position:relative;
background-image:url(img/header_bg.png);
background-repeat:no-repeat;
background-position:top;
height:87px;
text-align:center;
opacity:.80;
filter:alpha(opacity=80);
filter: "alpha(opacity=80)";
}
#menu{
top:85px;
width:100%;
height:33px;
background-image:url(img/bg_menu.jpg);
color:#999999;
text-align: center;
opacity:.80;
filter:alpha(opacity=80);
filter: "alpha(opacity=80)";
padding:3px 0px 20px 320px;
-moz-border-radius: 4em 2em;
-webkit-border-radius: 15px;
list-style: none;
}
#menu li {
margin: auto;
float: left;
}
#menu li a{
text-decoration: none;
color: #F3F3F3;
display: block;
padding: 17px 10px;
font-size: 14px;
font-weight: Bold;
}
#menu li a:hover {
color: #EE7F00;
background: url(img/bg_menu2.jpg);
}
#main {
float: none;
clear: both;
}
Saludos