Foros del Web » Creando para Internet » CSS »

¿Qué narices hago mal con el padding? help!

Estas en el tema de ¿Qué narices hago mal con el padding? help! en el foro de CSS en Foros del Web. Hola a todos y de antemano gracias a quien tenga la paciencia de intentar resolver esto. Vamos a ver, tengo un div (#cont00) que a ...
  #1 (permalink)  
Antiguo 26/04/2005, 05:08
Avatar de ~Moriarty~  
Fecha de Ingreso: junio-2004
Mensajes: 17
Antigüedad: 13 años, 5 meses
Puntos: 0
¿Qué narices hago mal con el padding? help!

Hola a todos y de antemano gracias a quien tenga la paciencia de intentar resolver esto.

Vamos a ver, tengo un div (#cont00) que a su vez contiene otros cuatro (que son floats), dos a la izquierda (uno encima de otro)y dos a la derecha (uno encima de otro). A su vez, cada uno de estos 4 floated divs contiene dos elementos (que son floats): una imagen y un div con texto (un h3).

Lo que os muestro a continuación IE lo muestra tal y como yo deseo, sin embargo, Firefox y Mozilla lo descuajeringan todo, ya que el padding:4px que tienen cada uno de los cuatro divs que están dentro del principal se muestra de una manera peculiar... bien en todos los lados menos en el derecho. Si pongo padding:4px, lo triplican en el lado derecho a 12px.. si pongo padding:7px, el lado derecho pasa a tener 21px de ancho.. ¿qué estoy haciendo mal?

Os copio la parte de los estilos y del html que creo que basta para entender qué pasa. Normalmente junto selectores que tengan declaraciones iguales, pero para que quede todo mas claro los he separado.

Por si sirve el doctype es <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

PARTE DE LA HOJA DE ESTILOS

html, body {background-color:#ffffff;height:100%;min-height:100%;width:100%;margin:0;padding:0;border:0 ;}

body{color:#333333;font-family:"Trebuchet MS",Helvetica,Geneva,Verdana,Arial,sans-serif}

body, div, h3
{
font-size:x-small;
voice-family: "\"}\"";
voice-family:inherit;
font-size:small
}
html>body, html>body div, html>body h3 {font-size:small}

#cont00{margin:auto;margin-top:25px;width:525px;background:#CCCCCC}

.cont2 {float:left;width:245px;border:1px solid #7F95A5;background-color:#C3D6E5;padding:4px}
* html .cont2 {width:255px;w\idth:245px}
.cont2 img {float:left;width:113px;display:block}
.cont2b {float:right;height:53px;text-align:center;background:#83A2BA;border:1px solid #FFFFFF;width:125px}
* html .cont2b{width:127px;w\idth:125px;height:55px;he\ig ht:53px}

.cont3 {float:right;width:245px;border:1px solid #7F95A5;background:#C3D6E5;padding4px}
* html .cont3 {width:255px;w\idth:245px}
.cont3 img{float:right;width:113px;display:block}
.cont3b {float:left;height:53px;text-align:center;background-color:#83A2BA;border:1px solid #FFFFFF;width:125px}
* html .cont3b{width:127px;w\idth:125px;height:55px;he\ig ht:53px}

#cont00 h3 {margin:0}
#cont00 h3.linkuno{margin-top:9px}
#cont00 h3.linkdos{margin-top:20px}


PARTE DEL HTML

<div id="cont00">
<div class="cont2" style="margin-bottom:4px">
<div class="cont2b">
<h3 class="linkuno"><a href="busqueda/indemp.html">&Iacute;NDICE<br>
DE ACTIVIDADES</a></h3>
</div>
<a href="busqueda/indemp.html"><img src="images/indiceActividades.jpg" alt="Actividades" width="113" height="53" border="0"></a>
</div>
<div class="cont3" style="margin-bottom:4px">
<div class="cont3b">
<h3 class="linkdos"><a href="contratacion/indcon.html">CONTRATOS</a></h3>
</div>
<a href="contratacion/indcon.html"><img src="images/contratos.jpg" alt="Contratos" width="113" height="53" border="0"></a>
</div>
<div class="cont2">
<div class="cont2b">
<h3 class="linkdos"><a href="/general/dirinte/dirinte.html">OFICINAS</a></h3>
</div>
<a href="/general/dirinte/dirinte.html"><img src="images/oficinas.jpg" alt="Oficinas" width="113" height="53" border="0"></a> </div>
<div class="cont3">
<div class="cont3b">
<h3 class="linkuno"><a href="eures/eures.html">RED EUROPEA<br>
DE EMPLEO</a></h3>
</div>
<a href="eures/eures.html"><img src="images/EURES.jpg" alt="EURES" width="113" height="53" border="0"></a> </div>
<br style="clear:both">
</div>

Última edición por ~Moriarty~; 26/04/2005 a las 05:27
  #2 (permalink)  
Antiguo 26/04/2005, 09:57
Avatar de ~Moriarty~  
Fecha de Ingreso: junio-2004
Mensajes: 17
Antigüedad: 13 años, 5 meses
Puntos: 0
Acabo de descubrir lo que era... tengo especificado en una hoja de estilos que se importa al html lo siguiente

#empleo div{overflow:hidden}

#empleo contenía al polémico div cuyo padding es un desastre. Éste es el problema.. ¿pero por qué algo así afecta al lado derecho del padding de un div? que alguien me lo explique!!!!!

Última edición por ~Moriarty~; 26/04/2005 a las 10:15
  #3 (permalink)  
Antiguo 03/05/2005, 11:44
 
Fecha de Ingreso: mayo-2005
Mensajes: 10
Antigüedad: 12 años, 7 meses
Puntos: 0
Lo que sucede es que si asignas un ancho determinado en pixeles, el padding y /o el borde que tenga asigna, se sumaran a esa medida hacia afuera, es decir si tu div mide 100 px de ancho y tiene 4px de padding, en realidad mide 108px.
PAra que no suceda se usa un div auxiliar, de la siguiente forma:
#box
{
width: 150px;
}

#box div {
border: 5px;
padding: 20px;
}

Y en el código se aplica de la sgte. forma:

<div id="box"><div>...</div></div>

De esta forma tu div siempre medirá 150px, no importa el navegador.
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 11:07.