Foros del Web » Creando para Internet » CSS »

problema con div en firefox

Estas en el tema de problema con div en firefox en el foro de CSS en Foros del Web. Buenas, estoy practicando con css, arme una estructura con varios divs y todo iba funcionando barbaro hasta que lo probe en mozilla. Hay un div, ...
  #1 (permalink)  
Antiguo 22/12/2006, 23:20
 
Fecha de Ingreso: julio-2005
Ubicación: Buenos Aires, Argentina
Mensajes: 1.304
Antigüedad: 12 años, 5 meses
Puntos: 6
problema con div en firefox

Buenas, estoy practicando con css, arme una estructura con varios divs y todo iba funcionando barbaro hasta que lo probe en mozilla. Hay un div, que se mueve unos pixels mas abajo cuando dentro le meto una lista. Hice unas capturas:

Firefox

Y asi es como quisiera que se vea: Explorer

index.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Practicas CSS</title>
<link rel="stylesheet" href="estilos.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="contenedor">
	<div id="header"></div>
	<div id="contenido">
		<div id="botonera">
			<ul>
				<li><p>Home</p></li>
				<li><p>Destacados</p></li>
				<li><p>Calendario</p></li>
				<li><p>Sobre mi</p></li>
			</ul>
		</div>
		<div id="contenido-central"></div>
		<div id="menu"></div>
	</div>
	<div id="footer"></div>
</div>
</body>
</html> 
estilos.css
Código HTML:
#botonera {
	background-color: #BBBBBB;
	width: 800px;
	height: 30px;
	margin-top: 0px;
}
#botonera ul {
	list-style:none;
}
#botonera ul li {
	float: left;
}
#botonera ul li p {
	display: block;
	background-color:#FFFFFF;
	border: solid #CCCCCC 1px;
	padding-top: 8px;
	padding-bottom: 4px;
	padding-right: 10px;
	padding-left: 10px;
}
body {
	background-color: #CCCCCC;
}
#contenedor {
	background-color: #FFFFFF;
	border-style: solid;
	border-color: #666666;
	border-width: 1px;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	height: 800px;
}
#header {
	background-color: #666666;
	width: 800px;
	height: 100px;
}
#contenido {
	background-color: #888888;
	width: 800px;
	height: 600px;
}
#footer {
	background-color: #AAAAAA;
	width: 800px;
	height: 100px;
}
#contenido-central {
	float: left;
	background-color: #DDDDDD;
	width: 600px;
	height: 600px;
}
#menu {
	float: left;
	background-color: #EEEEEE;
	width: 200px;
	height: 600px;
}

He probado tocando algunas cosas con margin negativo, pero evidentemente no es la solucion porque se arregla en firefox y se rompe en ie. Como soy novato de seguro se me esta escapando algun detalle, por eso agredezco a quien pueda darle una miradita a mi codigo.


Saludos y muchas gracias.
__________________
Federico.

Mi página: www.jourmoly.com.ar
  #2 (permalink)  
Antiguo 23/12/2006, 04:37
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Re: problema con div en firefox

Hola buenas,

No lo sé seguro pero prueba a quitar las etiquetas de parrafo..

Un Saludo!
__________________
La chapucería de la esquina
  #3 (permalink)  
Antiguo 23/12/2006, 07:56
 
Fecha de Ingreso: julio-2005
Ubicación: Buenos Aires, Argentina
Mensajes: 1.304
Antigüedad: 12 años, 5 meses
Puntos: 6
Re: problema con div en firefox

Hola, gracias por tu respuesta pero eso no soluciona el problema. Se ve un poco mejor, pero el div de la botonera aparece como 10px mas abajo que el div header.


EDITO: Solucionado!! :D :D :D

Código HTML:
#botonera {
	background-color: #BBBBBB;
	width: 800px;
	height: 30px;
	margin-top: 0px;
}
#botonera ul {
	list-style:none;
	padding: 0px;
	margin: 0px;
}
#botonera ul li {
	float: left;
	display: block;
	background-color:#FFFFFF;
	border: solid #CCCCCC 1px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 10px;
	padding-left: 10px;
}
Saque las etiquetas de parrafos y agregue

padding: 0px;
margin: 0px;

a la etiqueta ul


Saludos.
__________________
Federico.

Mi página: www.jourmoly.com.ar

Última edición por Fridureiks; 23/12/2006 a las 08:52
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 08:20.