Foros del Web » Creando para Internet » CSS »

problema con un menu en firefox

Estas en el tema de problema con un menu en firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/01/2006, 13:27
 
Fecha de Ingreso: febrero-2004
Mensajes: 77
Antigüedad: 13 años, 9 meses
Puntos: 0
problema con un menu en firefox

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)  
Antiguo 21/01/2006, 13:34
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #3 (permalink)  
Antiguo 21/01/2006, 13:38
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola Calandras

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

display: block;

Saludos,
  #4 (permalink)  
Antiguo 21/01/2006, 14:08
 
Fecha de Ingreso: febrero-2004
Mensajes: 77
Antigüedad: 13 años, 9 meses
Puntos: 0
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)  
Antiguo 21/01/2006, 14:17
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
pega el html para que podamos verlo.
  #6 (permalink)  
Antiguo 21/01/2006, 16:43
 
Fecha de Ingreso: febrero-2004
Mensajes: 77
Antigüedad: 13 años, 9 meses
Puntos: 0
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)  
Antiguo 21/01/2006, 16:56
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
debe ser porque es una lista y el fondo lo tienen los enlaces.
agregá

#menu li {
margin-left : 0px;
}
  #8 (permalink)  
Antiguo 22/01/2006, 03:12
 
Fecha de Ingreso: febrero-2004
Mensajes: 77
Antigüedad: 13 años, 9 meses
Puntos: 0
Eso no lo soluciona. Queda asi:

Firefox:


IE:
  #9 (permalink)  
Antiguo 22/01/2006, 10:00
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #10 (permalink)  
Antiguo 22/01/2006, 11:38
 
Fecha de Ingreso: febrero-2004
Mensajes: 77
Antigüedad: 13 años, 9 meses
Puntos: 0
He probado con todas las posibilidades de margin pero no funciona. Sin embargo, si aumento la anchura del div, si me sale bien.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:47.