Caso inexplicable

Mikeliu · #1 (**permalink**) 28/06/2011, 15:45

Hoy mientras depuraba un problema de maquetación me he encontrado con un problema que me ha dejado inquieto y todavía no encuentro explicación.

Considero que tengo bastantes conocimientos en CSS pero he descubierto un caso concreto (bastante sencillo, por cierto) que no logro explicar de ninguna de las maneras. Mejor lo explicaré con código:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<style>
			html, body { width:100%; height:100%; margin:0 }
			#padre { background:blue; height:100% }
			#hijo { background:red; width:500px; height:300px }
		</style>
	</head>
	<body>
		<div id="padre">
			<div id="hijo"></div>
		</div>
	</body>
</html>

Hasta aquí todo bien. Un div que ocupa toda la pantalla (dentro del body) con un div hijo (dimensionado a 500x300) en su interior. Lo inesperado viene cuando al elemento hijo le damos un margen. Imaginemos:

Código:

margin:100px auto 0

Pues bien, lo esperado, según los principios del diseño CSS, el div hijo debería centrarse al medio y descender 100 píxeles respecto el límite superior de su elemento padre. ¡Pues no!: En realidad lo que hace es descender el padre, no el hijo.

En un principio he pensado que debía ser algún bug particular de Firefox 5. Pero no, esto es general; pasa tanto en el explorador de Mozilla como en Chrome, Safari, Opera, IE...

conexion · #2 (**permalink**) 28/06/2011, 17:00

Tienes que establecer la relación de posición entre ellos; si no lo haces, el navegador no entenderá la composición.

Una solución:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<style>
			html, body { width:100%; height:100%; margin:0 }
			#padre { background:blue; height:100%; position: relative }
			#hijo { background:red; width:500px; height:300px; position: absolute; margin-left: -250px; left: 50%; top: 100px; }
		</style>
	</head>
	<body>
		<div id="padre">
			<div id="hijo"></div>
		</div>
	</body>
</html>

Mikeliu · #3 (**permalink**) 28/06/2011, 17:17

Sí, esa es una manera de posicionar.

Pero lo más natural es colocar un elemento en base a sus márgenes. Y en el ejemplo anterior los navegadores no pintan como deberían.

Añadid al padre:

Código:

padding-top:1px

Veréis por dónde van los tiros y de ahí mi gran interrogante. Sigo sin entenderlo.

ZoroRoronoa · #4 (**permalink**) 28/06/2011, 17:31

Cita:

En realidad lo que hace es descender el padre, no el hijo.

Esto pasa, por que el hijo tiene un ancho de 500px.

entonces el padre, no tiene un ancho especificado, por lo que sera auto, y se ajustara al del hijo.

si el hijo tiene 500, el padre tambien lo tendra, y no hay base del padre para agarrar el margin, por lo que el hijo se mueve y el ancho del padre lo sigue.

hay varias maneras de hacer eso y que funcione (el 100px de margin, los 500 del hijo y el padre no se mueva)

1) hijo 500px ancho, padre 600px de ancho, margin izq o der de 100px (hijo flotado a left o right)

2) padre 500px ancho, padding left o right de 100px al padre y 500px de ancho al hijo

Saludos.

tredio · #5 (**permalink**) 28/06/2011, 20:21

Cita:

Iniciado por ZoroRoronoa

Esto pasa, por que el hijo tiene un ancho de 500px.

entonces el padre, no tiene un ancho especificado, por lo que sera auto, y se ajustara al del hijo.
.

creo que no es asi como pasa, si un elemento de bloque no tiene ancho definido, automaticamente su ancho sera el 100% de su contenedor, en este caso del body, para que el padre se adaptara al tamaño del hijo, nuevamente "en este caso", lo podriamos poner con algun float, asi si adaptaria su tamaño.

volviendo al tema del problema, me ha pasado lo mismo y siempre termino solucionandolo con paddings, no tengo idea de porque pasa esto tampoco, alguien sabe?

tredio · #6 (**permalink**) 28/06/2011, 20:33

ok probando un poco, si le pongo un overflow:hidden al #padre se soluciona el problema, pero igual sigo sin entender por que pasa esto.

webosiris · #7 (**permalink**) 29/06/2011, 02:30

esto sucede por lo que se llama "collapsing margins"

cristian_cena · #8 (**permalink**) 29/06/2011, 03:17

La verdad desconocía la razón de este tema. gracias webosiris.
Otra cosa que nunca me quedó bien claro es como usar el haslayout. en fin termino haciendo una hoja de estilo alternativa para la version 6 y 7 de ie por no comprenderlo, si tienes a bien de compartir un link o un ejemplo desde ya que te estoy muy agradecido.

Saludos.

webosiris · #9 (**permalink**) 29/06/2011, 03:31

Cita:

Iniciado por cristian_cena

Otra cosa que nunca me quedó bien claro es como usar el haslayout.

el haslayout es algo un poco difícil de entender al principio pero cuando lo haces se transforma en algo bastante tonto

básicamente es una "propiedad" que IE le asigna a cada elemento, que puede estar apagada (valor 0, por defecto) o prendida (valor 1) y muchos bugs se solucionan "prendiendo" ese estado. El problema es que es una propiedad indirecta, osea, no puedes poner haslayout:1; directamente en el css.

El haslayout se prende cuando se usan determinadas propiedades de css (como height o width por ejemplo). Sin embargo la forma más fácil de activarlo es usando la propiedad zoom (que es privativa del ie, su efecto es simular la opción zoom del navegador) porque con un valor de 1, dicha propiedad activa el haslayout SIN modificarte ninguna otra cosa y es aplicable a cualquier caso (width por ejemplo no, porque siempre tendrás casos donde no quieras fijar un width)

espero que se haya entendido

cristian_cena · #10 (**permalink**) 29/06/2011, 03:57

Gracias webosiris, se entiende perfecto la explicación, comentarte que a este tema lo archirecontraleí en muchos lugares pero la vez que apliqué zoom:1; por ejemplo o el también recomendado height:1%; nunca me hizo caso ie jajaja, asi que en ultima dije chau, pongo hojas de estilo alternativas y listo.
Supongo que se debe aplicar para casos específicos, me gustaría saber esta lista de casos o ver algún ejemplo de algún sitio que lo este usando, a modo de destriparlo con firebug y hacerme con el "ahhhh, así era".

gracias por el aporte, saludos.

Mikeliu · #11 (**permalink**) 29/06/2011, 05:47

Cita:

Iniciado por ZoroRoronoa

Esto pasa, por que el hijo tiene un ancho de 500px.

entonces el padre, no tiene un ancho especificado, por lo que sera auto, y se ajustara al del hijo.

si el hijo tiene 500, el padre tambien lo tendra, y no hay base del padre para agarrar el margin, por lo que el hijo se mueve y el ancho del padre lo sigue.

hay varias maneras de hacer eso y que funcione (el 100px de margin, los 500 del hijo y el padre no se mueva)

1) hijo 500px ancho, padre 600px de ancho, margin izq o der de 100px (hijo flotado a left o right)

2) padre 500px ancho, padding left o right de 100px al padre y 500px de ancho al hijo

Saludos.

El padre sí tiene dimensiones propias. La altura viene de height:100% y el ancho es automático por lo que, como bien ha dicho tredio, para los bloques es el 100%.

Y, aunque no las tuviera, un elemento padre no tiene porqué verse afectado por su descendencia en lo que respecta a los márgenes, rellenos, bordes, contornos... En todo caso son los elementos hijos los que se ven afectados por los padres.

Mikeliu · #12 (**permalink**) 29/06/2011, 05:53

Cita:

Iniciado por cristian_cena

... en fin termino haciendo una hoja de estilo alternativa para la version 6 y 7 de ie...

No sé si seré de los pocos que lo hace pero yo personalmente al crear webs prefiero utilizar hojas de estilo y scripts aparte específicos para IE.

Mikeliu · #13 (**permalink**) 29/06/2011, 06:23

Cita:

Iniciado por webosiris

esto sucede por lo que se llama "collapsing margins"

Gracias. Tu enlace me ha sido de ayuda.

cristian_cena · #14 (**permalink**) 29/06/2011, 10:01

mikeliu, de hecho la hoja de estilos que contenga el zoom:1; debe ser exclusiva para ie si quieres validar el css. Mi inquietud con haslayout es solo porque creo que quedaría mas profesional el trabajo.

Saludos.

Mikeliu · #15 (**permalink**) 29/06/2011, 13:37

Cita:

Iniciado por cristian_cena

mikeliu, de hecho la hoja de estilos que contenga el zoom:1; debe ser exclusiva para ie si quieres validar el css. Mi inquietud con haslayout es solo porque creo que quedaría mas profesional el trabajo.

Saludos.

Sí, y por eso mismo y demás "empreños" suelo separar el código IE del resto.