margin-top "irrespetuoso" (FF)

[AlZuwaga]

Hola, me encuentro con un error (según yo) que no le encuentro la lógica.
Veamos, tengo un contenedor que tiene un margin-top de 50px.
Dentro de aquel un div#top y dentro de éste último un div#nav.
Deseo que el div#nav esté 9px separado del extremo superior del div#top, por lo que le coloqué un margin-top de 9px.
Ok, en IE se ve como yo considero que se tendría que ver, mas no en FF.

Les dejo un ejemplo autoexplicativo para que lo vean funcionando.

Jueguen con FF con los siguientes valores:

margin-top= 40 (da lo mismo que lo hagan de 0 a 50)
position= inherit

margin-top= 100 (para exagerar y que se note el comportamiento)
position= inherit

¿vas entendiendo? Aparentemente el margin-top (de div#nav) no tiene efecto alguno hasta superar al margin-top de div#contenedor (50px, en este caso). Una vez superado esos 50px, absolutamente todo se desplaza esa cantidad hacia abajo!

La solución que le encontré fué ponerle position absolute a div#nav. Y funciona.

So, la cuestión es... ¿por qué demonios pasa eso????? :)

Nos vemos

[CID@Devs]

Modifica tu css:

#top {
height: 71px;
background-color: #009966;
border: 1px solid;
}

Deberia funcionar.

[AlZuwaga]

Hola,

entre el hábito de dormir y otras obligaciones que tendré no me queda otra que probar tu consejo en aproximadamente 12 horas.

Pero creo que sólo le agregaste un border (si mal no recuerdo mi css), por tanto no le encuentro lógica y caigo en la misma pregunta: ¿por qué pasa eso?

Igual lo pruebo mañana y te comento. Gracias.

[Hereje]

Hola Al, lo que te sucede es que se estan "cerrando los márgenes", suceso que ocurre entre márgenes verticales adyacentes con la finalidad de formar sólo uno. Por cierto esto es muy útil al utilizarlos en forma correcta.

Aca podes leer algo y sacar tus dudas.

Un abrazo y hasta pronto!

[AlZuwaga]

CID@Devs, probado. Funcionó lo del border!
Pero como el diseño (no la maqueta que mostré) no debe tener border (llevá un background-image), no me sirve :(

¿Hay algún problema si lo dejo con position absolute para solucionarlo?


Hereje, gracias, pero no lo entendí. Voy a investigar acerca de collapsing margins.

Gracias

[AlZuwaga]

Mmm... bueno, puedo ponerle sólo border-top del mismo color que el color de fondo del body y quedaría invisible el borde...

[Hereje]

Pero por dentro sabes que está mal, y no vas a poder dormir! ;)

[Hereje]

Hice un pequeño ejemplo gráfico entre un encabezado y un párrafo para que trates de ver las cosas mejor.



Como podrás ver, el margen inferior del <h1> se colapsa con el margen superior del <p>. Quedando en este caso 15px de margen inferior mínimo de un <h1>, a menos que el superior de un <p> sea mayor.

Espero te ayude, saludos!

[SiR.CARAJ0DIDA]

ah con razon, ahora entiendo el problema que me volvio loco una vez, pero no termino de entender para que sirve esto, solo me complica la vida y encima no funciona en IE.

[Hereje]

Es útil generalmente para encabezados, parrafos, listas, etc. en un documento lineal o en una parte. Una vez que lo empiezas a usar luego se hace costumbre facilmente.

En IE sí funciona, sólo que en algunos casos no. Por ejemplo, en FF el primer margen de un primer elemento adentro de un bloque lo ignora, pero IE no. Fundamentalmente por esa razón no se puede jugar totalmente con los margenes cerrados al haber problema de incompatibilidad, pero nada que no se pueda solucionar con un parche.

Saludos!

[SiR.CARAJ0DIDA]

jaja, dijiste parche? los unicos parches que saca mocosoft son de seguridad, el navegador es "seguro" pero ves las paginas para la mierda, es la politica de bill gates

[Hereje]

Me referia a un "parche" creado por nosotros mismos con artilugios en css.

[CID@Devs]

Al Zuwaga como lo solucionaste: Color de borde = Color de fondo
Hereje gracias por hacelo más "visible"

[AlZuwaga]

Ups, perdón por no responder antews. Es que cuando no me suscribo a un tema, pasado un tiempo me olvido de él.

Iniciado por Hereje

Pero por dentro sabes que está mal, y no vas a poder dormir! ;)

Jajaja. ¿Sabés que, Hereje?, aun sin haber leido ese mensaje, esa noche no pude dormir! (pero por otra cosa... infección del ganglio izquierdo de mi garganta... caraj... ¡cómo duele!)

Bueno, recién hoy me puse a investigar sobre los márgenes que se colapsan y finalmete lo terminé de (o comencé a) entender con este artículo: No Margin for Error


CID@Devs, lo solucioné con un borde superior de 1px con el mismo color de fondo del body (por suerte, en este caso, el body tiene un color de fondo uniforme). Aunque "supongo" sería válida la solución de dejarlo con position absolute ya que el artículo que enlacé arriba dice::

The CSS2 Specs explain that margins of absolutely and relatively positioned boxes don't collapse.

Y me pareció entender (en ese mismo artículo) que también se solucionaría dándole un padding... pero no me quedó claro cómo aplicarlo en mi situación.


Bueno, gracias por los comentarios y sugerencias.

salú