Buenas, estoy haciendo un menú de listas con su respectivo enlace y todo bien en Iexplorer y Opera menos en Mozilla
El código que utilizo es el siguiente:
Código HTML:
<style type="text/css">
ul {
margin-top:95px;
margin-left:35px;
}
li {
font-family: "Courier New", Courier, mono;
font-size: 12px;
color: #D2D4B8;
list-style-image:url(fondo_bullet_verde.jpg);
list-style-position:outside;
margin:8px;
}
body {
background-color:#EEEEE4;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#contenedor{
margin: 0 auto;
background-color:#D2D4B8;
width:770px;
}
#cabecero{
width:770px;
height:120px;
background-color:#6F8779;
background-image:url(fondo_encabezado.gif);
}
#contenido{
float:left;
width:619px;
height:380px;
background-color:#D2D4B8;
border-left-width: 1px;
border-left-style: dashed;
border-left-color: #EEEEE4;
}
#menu {
width:150px;
height:380px;
background-color:#D2D4B8;
background-image:url(fondo_menu.jpg);
float:right;
background-repeat: no-repeat;
background-position: center center;
}
#menu li a{
color: #D2D4B8;
text-decoration:none;
}
#menu li a:hover{
color: #D2D4B8;
text-decoration:underline;
}
#pie {
width:770px;
height:100px;
background-color:#A09A84;
float:left;
background-image:url(fondo_pie.gif);
}
...
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecero"></div>
<div id="contenido">
<h1>asdfa</h1>
<p>
asdfasdf
</p>
</div>
<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Portafolio Web</a></li>
<li><a href="#">Fotografias</a></li>
<li><a href="#">Retoques</a></li>
<li><a href="#">Ilustración</a></li>
<li><a href="#">Fondos escritorio</a></li>
<li><a href="#">Otros</a></li>
<li><a href="#">Curriculum</a></li>
</ul>
</div>
<div id="pie"></div>
</div>
</body>
Y aquí una muestra del problema, asi se ve en Iexplorer y Opera:
y así en Mozilla se desplaza a la derecha
¿En que estoy fallando?
Saludosss