problema con div en firefox

Fridureiks · #1 (**permalink**) 22/12/2006, 23:20

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.

limboings · #2 (**permalink**) 23/12/2006, 04:37

Hola buenas,

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

Un Saludo!

Fridureiks · #3 (**permalink**) 23/12/2006, 07:56

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.