CSS - El padding en Firefox hace mi capa más grande

   
Vista:

El padding en Firefox hace mi capa más grande

Publicado por Pablo (5 intervenciones) el 14/07/2009 14:35:48
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 claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:El padding en Firefox hace mi capa más grande

Publicado por patricio (8 intervenciones) el 03/10/2009 06:32:15
resetea tu css, pone esto el principio

* html, body, div, span,
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size:100%;
}

y escribe tu css separada del html o te convertiras en un mono
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:El padding en Firefox hace mi capa más grande

Publicado por Pableras (5 intervenciones) el 05/10/2009 09:45:12
Hola ...

Suelo separar el css del html pero para una prueba de nada me daba igual tenerlo junto.

Por cierto, si pones eso en Firefox no hace nada. Te ha faltado quitar la "," de después del "span" y añadirle al "*" del principio un ">" porque si pones:

*html, body, div, span

funciona en Internet Explorer pero no en Firefox

y si pones:

*>html, body, div, span

funciona en Firefox pero no en Internet Explorer

(si pones algo ponlo bien porque para eso mejor que me conteste el barrendero de la esquina)

Ya lo solucioné en su momento. Creo que la solución fué crearme una capa dentro de la capa "izq", por ejemplo "contIzq" (contenido izquierda). A la más externa, "izq", le dejé todos los atributos css como estaban salvo lo del padding, que se lo asigné a la interior ("contIzq"). Es posible que en ese caso haya que ponerle menos "width" a la capa "izq" para que se vea bien n los 2 navegadores, pero eso ya no tiene que ver con el problema del padding que preguntaba.

Si a alguien le puede servir ésto me alegro :-D

Un saludoooo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:El padding en Firefox hace mi capa más grande

Publicado por Alejandro (1 intervención) el 18/11/2009 14:22:56
lo ideal seria que en lugar de crearte mas div(capas) hagas una relga muy simple:

si tienes el div en width(ancho)=200px; y tienes un padding-left=80px;

tienes que restar lo que utilizas en el padding a tu width del div y listo lo tienes todo acomodado.

quedaria

width:120px;
padding-left:80px;

la sumatoria de los dos te da el tamaño total del div que utilizas para tu contenido.

;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar