HTML - El padding hace que en Firefox mi capa aumente

El padding hace que en Firefox mi capa aumente

Publicado por Pablo (2 intervenciones) el 14/07/2009 14:37:32

Hola, qué tal ???

Mi problema es muy simple. Tengo una página en cuya parte central hay 2 partes: capa izquierda, para las futuras opciones y el resto para el contenido.

Al poner algo de padding-left (o padding-right) en la capa izquierda, en Firefox la capa se hace más grande (aumenta justo los pixels que haya puesto de padding) con lo cual provoca que la capa de contenido se vaya hacia abajo.

Cómo puedo evitar ésto ??? ... no se puede forzar a que, aunque se ponga padding, la capa mantenga su tamaño??

Dejo el código de mi página. Cópialo y pégalo y guárdalo como html. Lo digo para que veas cómo queda si quieres en Internet Explorer y en Firefox ....Graciasssss

<html>

<head>

<style>

body{font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;font-size:80%}
div{border: 0px solid;}
#contenedor{position:absolute;width:983px;height:96%;left:50%;margin-left:-491px}
#cab{width:100%;height:13%;background-color:#DBE9FD}
#opcPrin{height:5%;background-color:#DDFF30;width:100%;padding-left:0px}
.opcSup{width:100px;float:left;height:100%;text-decoration:none;text-align:center}
#opcPrin a:hover{background-color:#FFFFFF}
#opcPrin img.valign {
height: 100%;
width: 0px;
vertical-align: middle;
visibility:hidden;
}
#cuerpo{width:100%;height:77%;background-color:#FFFFFF;}
#izq{height:50px;width:202px;float:left;padding: 4 6 4 6px;border:0px solid;background-color:#C0C0C0;}
#centro{height:100%;width:777px;float:right;padding: 4 1 4 7px;border:0px solid;background-color:#FFFF80;overflow:auto}

#pie{width:100%;height:5%;background-color:#C0FF30}

</style>

</head>

<body>

<div id="contenedor">

<div id="cab">

</div>

<div id="opcPrin">

<a href="#" class="opcSup"><img class="valign"/>primera</a>
<a href="#" class="opcSup"><img class="valign"/>segunda</a>
<a href="#" class="opcSup"><img class="valign"/>tercera</a>
<a href="#" class="opcSup"><img class="valign"/>cuarta</a>
<a href="#" class="opcSup"><img class="valign"/>quinta</a>

</div>

<div id="cuerpo">

<div id="izq">Parte izquierda donde estarán las opciones de la izquierda
</div>

<div id="centro">

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

</div>

</div>

<div id="pie">

</div>

</div>

</body>

</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

RE:El padding hace que en Firefox mi capa aumente

Publicado por Bet7o (31 intervenciones) el 15/07/2009 23:28:04

Hola,

Pues lamentablemente estamos muy acostumbrados a trabajar con IE y bueno recordemos que IE no respeta los standares, por otro lado veo que maquetas con div y eso me parece muy bien aun existen muchos compañeros que hubieras utilizado tablas.

Te dejo el codigo con algunas modificaciones, haber si te sirve.

Saludos!

------------------------------------------------------------------------------------------------------------------

<html>
<head>
<style>
body{font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;font-size:80%}
div{border: 0px solid;}
#contenedor{position:absolute;width:983px;height:96%;left:50%;margin-left:-491px}
#cab{width:100%;height:13%;background-color:#DBE9FD}
#opcPrin{height:5%;background-color:#DDFF30;width:100%;padding-left:0px}
.opcSup{width:100px;float:left;height:100%;text-decoration:none;text-align:center}
#opcPrin a:hover{background-color:#FFFFFF}
#opcPrin img.valign {
height: 100%;
width: 0px;
vertical-align: middle;
visibility: hidden;
}
#cuerpo{
position: relative;
width:100%;
overflow: hidden;
background-color:#FFFFFF;
margin: 0px;
padding: 0px;
}
#izq{
height: 100%;
width: 206px;
float: left;
margin: 0px;
border: 0px solid;
background-color: #C0C0C0;
padding: 0px 0px 4px 0px;
}
#izq div {
padding: 4px 6px 4px 6px;
width: 100%;
}
#centro{
height:100%;
width:776px;
float: left;
padding: 0px 1px 4px 0px;
border: 0px;
background-color: #FFFF80;
overflow: auto;
}
#centro p {
padding: 0px 0px 0px 14px;
}
#pie{
clear: both;
width:100%;
height:5%;
background-color:#C0FF30
}

</style>
</head>
<body>
<div id="contenedor">
<div id="cab">
</div>
<div id="opcPrin">
<a href="#" class="opcSup"><img class="valign"/>primera</a>
<a href="#" class="opcSup"><img class="valign"/>segunda</a>
<a href="#" class="opcSup"><img class="valign"/>tercera</a>
<a href="#" class="opcSup"><img class="valign"/>cuarta</a>
<a href="#" class="opcSup"><img class="valign"/>quinta</a>
</div>
<div id="cuerpo">
<div id="izq">
<div>
Parte izquierda donde estarán las opciones de la izquierda
</div>
</div>
<div id="centro">
<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>

<p>Parte central donde estará el contenido principal. Voy a escribir un poco para que este
texto se pueda ir a la siguiente línea y ver cómo queda. Espero que quede bien. Como ves me estoy
enrollando mucho y ya no sé de qué hablar, así que diré bla bla bla</p>
</div>
</div>
<div id="pie">
</div>
</div>
</body>
</html>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

RE:El padding hace que en Firefox mi capa aumente

Publicado por Pablo (2 intervenciones) el 16/07/2009 10:34:33

Perfecto ...

Veo que has utilizado el padding en una capa interna a la capa #izq y lo mismo en la capa #centro sólo que con los párrafos. Yo al final quité el padding que pusiste tú en los párrafos y lo que hice fue, como en la capa #izq, crearme otra capa dentro de #centro que englobase todos los párrafos y a esa ponerla el padding. Luego ya he retocado los estilos conforme a mis necesidades, pero el problema que tenía con los padding me lo has solucionado completamente.

Muchísimas graciaaaaaaaaaaaaassssss :-)

Valora esta respuesta

Comentar

imagen que ocupe toda la celda

Como crear tu pagina web en internet Gratis