Capa desobediente en Firefox

arleyb · #1 (**permalink**) 13/06/2006, 16:44

Bueno, resulta que tengo un pequeño problema con un padding que no se ve bien en Firefox pero en IE se ve correctamente. Tengo una capa llamada cabecera y otra llamada cuerpo con un ancho de 700px, estas dos se encuentran dentro de otra capa padre llamada contenedor de 700px, resulta que deseo darle un padding-left y padding-right al contenido
de la capa cuerpo, pero cuando se la doy funciona perfectamente en IE, pero al verlo en Firefox aparece como si el ancho se incrementara
según el padding, por ejemplo si le coloco un padding-left de 10px la capa cuerpo queda con un ancho de 710px. Espero me puedan ayudar a resolver este problemita, dejo el codigo que utilizo. Gracias!

CSS:

Cita:

BODY{
background-image:url(bc.png);
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #666666;
margin : 40px 0px 20px 0px;
text-align: center;
}

#contenedor{
border-style:solid;
border-width:thin;
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}

#cabecera{
height : 75px;
width: 700px;
background-color:#FFFFFF;
}

#cuerpo{
width:700px;
text-align:left;
background-color : #ffffff;
padding-left: 10px;

}

HTML:

Cita:

<html>
<head>
<title>Titulo de la Pagina</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="contenedor">
<div id="cabecera">Cabecera</div>
<div id="menu">item 1, item 2, item 3, etc...</div>
<div id="cuerpo">
<h1>Titulo de la pagina actual</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur turpis purus, fringilla at, tristique vitae, venenatis vel, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eget orci nec risus posuere facilisis. Proin sit amet nisl. Curabitur lectus felis, interdum vitae, vestibulum ultrices, vehicula vitae, nibh. Aliquam augue mi, viverra quis, fermentum id, mattis vitae, quam. In neque. Integer wisi metus, tempor vitae, tempus vitae, luctus a, enim. Mauris justo. Nulla rutrum sapien nec mi. Proin dolor neque, auctor ut, pulvinar ut, mattis eu, erat.</p>
<h2>Sub-subtitulo</h2>
<p> Praesent tincidunt. Nam quis quam at nunc pretium eleifend. Praesent ipsum sapien, aliquam a, scelerisque sit amet, consectetuer in, arcu. Maecenas at wisi in augue tempor tincidunt. Fusce viverra ante gravida quam. Vestibulum varius lacus vitae lorem. Sed malesuada. Maecenas non urna vitae metus elementum imperdiet. Donec justo enim, pulvinar ultricies, dapibus aliquam, laoreet sed, libero. Ut odio purus, ultricies in, condimentum non, tincidunt ac, odio. Nulla eget velit. Suspendisse massa. </p>
<div id="footer">Copyright2006 - Derechos reservados</div>
</div>
</div>
</body>
</html>

edudw · #2 (**permalink**) 13/06/2006, 17:58

hola Arleyb.

Mira ponle esto a #cuerpo.

Código:

#cuerpo{
	width:auto;
	text-align:left;
	background-color : #ffffff;
	padding-left: 10px;
	padding-right: 10px;
}

El width lo coloque a auto.

Ojala te sirva.

Saludos.

arleyb · #3 (**permalink**) 13/06/2006, 18:26

Edudw, muchas gracias, funcionó a la perfección, te debo una. bye

KnowDemon · #4 (**permalink**) 14/06/2006, 06:45

Hola,

Debes recordar el el ancho total de un elemento no solo es el especificado en width. Es el width + padding + ancho del borde.

:o)

arleyb · #5 (**permalink**) 14/06/2006, 17:48

tienes razon, se deben sumar todos esos elementos a la hora de definir el width