problema con un menu en firefox

Calandras · #1 (**permalink**) 21/01/2006, 13:27

Lo primero es que no le presteis mucha atencion a los colores y esas cosas. Es una simple prueba.
Bueno, el menu es una lista de elementos dentro de un div. El id del div es lateral y el id de la lista es menu. El archivo css tiene lo siguiente:

#menu {
margin:5;
padding:0;
list-style:none;
width: 100px;
}

#lateral {
width: 100px;
background-color: #74dedf;
float: left;
font: bold;
}

#menu a{
background-color: #0099cc;
text-decoration: none;
color: #0066ff;
margin-top: 5;
margin-botton: 5;
border-style: outset;
width: 100px;
}

#menu a:hover{
background-color: #0099cc;
text-decoration: none;
color: #0066ff;
border-style: inset;
}

Y ahora el problema. Si lo miro en IE me sale bien pero en firefox los botones se solapan (no importa el margen que ponga) y son de diferente tamaño. ¿Cual es el problema y como lo podria resolver?

IE:

Firefox:

#2 (**permalink**) 21/01/2006, 13:34

el código es exactamente igual al que tienes?

si es así, te hago los siguientes comentarios:
1.- siempre pon las unidades de las cantidades:
margin-botton: 5;
debe ser
margin-botton: 5px; (o em, %, pt, etc)

2.- margin-botton: 5;
debe ser
margin-bottom: 5; (m en vez de n)

Saludos.

JavierB · #3 (**permalink**) 21/01/2006, 13:38

Hola Calandras

Además de lo que te dice alvlin, añade a #menu a

display: block;

Saludos,

Calandras · #4 (**permalink**) 21/01/2006, 14:08

Muchas gracias. Por fin se ve como tendria que ser, aunque el fondo del div sale movido a la izquierda en lugar de estar centrado

#5 (**permalink**) 21/01/2006, 14:17

pega el html para que podamos verlo.

Calandras · #6 (**permalink**) 21/01/2006, 16:43

Esta es la pagina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<%@ Language="JavaScript"%>
<html>
<head>
<title>index</title>
<link rel="STYLESHEET" type="text/css" href="css/final.css">
<script type='text/javascript' src="javascript/final.js"></script>
</head>
<body>
<div id="cabecera">
</div>
<div id="navegador">
<a href="#" class="">Inicio</a>
<a href="#" class="">Registrar</a>
<a href="#" class="">Mi Cuenta</a>
<a href="#" class="">Amigos</a>
<a href="#" class="">Tutorial</a>
<a href="#" class="">Enlaces</a>
<a href="#" class="">Contactar</a>
<a href="#" class="">Salir</a>
</div>
<div id="lateral">
<ul id="menu">
<li><a href="http://www.google.com" class="">Inicio</a></li>
<li><a href="#" class="">Registrar</a></li>
<li><a href="#" class="">Mi Cuenta</a></li>
<li><a href="#" class="">Amigos</a></li>
<li><a href="#" class="">Tutorial</a></li>
<li><a href="#" class="">Enlaces</a></li>
<li><a href="#" class="">Contactar</a></li>
<li><a href="#" class="">Salir</a></li>
</ul>
</div>
<div id="cuerpo">
</div>
</body>
</html>

Y este el archivo css:

#menu {
margin:5px;
padding:0;
list-style:none;
width: 100px;
}

#lateral {
width: 100px;
background-color: #74dedf;
float: left;
font: bold;
}

#menu a{
background-color: #0099cc;
text-decoration: none;
color: #0066ff;
margin-top: 5px;
margin-bottom: 5px;
border-style: outset;
width: 100px;
display: block;
}

#menu a:hover{
background-color: #0099cc;
text-decoration: none;
color: #0066ff;
border-style: inset;
}

#navegador {
background-color: #f5f4c3;
padding: 3px 10px 5px 10px;
}

#7 (**permalink**) 21/01/2006, 16:56

debe ser porque es una lista y el fondo lo tienen los enlaces.
agregá

#menu li {
margin-left : 0px;
}

Calandras · #8 (**permalink**) 22/01/2006, 03:12

Eso no lo soluciona. Queda asi:

Firefox:

IE:

#9 (**permalink**) 22/01/2006, 10:00

y si le ponés un valor negativo al mergen o probás darle margin:0 al ul?

sigo pensando que es cuestión de márgenes.

Saludos.

Calandras · #10 (**permalink**) 22/01/2006, 11:38

He probado con todas las posibilidades de margin pero no funciona. Sin embargo, si aumento la anchura del div, si me sale bien.