Foros del Web » Creando para Internet » CSS »

margin-top "irrespetuoso" (FF)

Estas en el tema de margin-top "irrespetuoso" (FF) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/04/2006, 19:10
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
margin-top "irrespetuoso" (FF)

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
__________________
...___...
  #2 (permalink)  
Antiguo 18/04/2006, 20:54
 
Fecha de Ingreso: marzo-2006
Mensajes: 41
Antigüedad: 11 años, 8 meses
Puntos: 0
Modifica tu css:

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

Deberia funcionar.
  #3 (permalink)  
Antiguo 18/04/2006, 22:57
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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.
__________________
...___...
  #4 (permalink)  
Antiguo 19/04/2006, 00:56
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 15 años, 6 meses
Puntos: 2
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!
__________________
Sergio
  #5 (permalink)  
Antiguo 19/04/2006, 12:27
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
[email protected], 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
__________________
...___...
  #6 (permalink)  
Antiguo 19/04/2006, 12:31
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Mmm... bueno, puedo ponerle sólo border-top del mismo color que el color de fondo del body y quedaría invisible el borde...
__________________
...___...
  #7 (permalink)  
Antiguo 19/04/2006, 15:42
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 15 años, 6 meses
Puntos: 2
Pero por dentro sabes que está mal, y no vas a poder dormir! ;)
__________________
Sergio
  #8 (permalink)  
Antiguo 19/04/2006, 16:04
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 15 años, 6 meses
Puntos: 2
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!
__________________
Sergio
  #9 (permalink)  
Antiguo 20/04/2006, 07:14
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
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.
__________________
Internet Explorer SuckS
Download FireFox
  #10 (permalink)  
Antiguo 20/04/2006, 08:15
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 15 años, 6 meses
Puntos: 2
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!
__________________
Sergio
  #11 (permalink)  
Antiguo 20/04/2006, 12:56
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
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
__________________
Internet Explorer SuckS
Download FireFox
  #12 (permalink)  
Antiguo 20/04/2006, 15:57
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 15 años, 6 meses
Puntos: 2
Me referia a un "parche" creado por nosotros mismos con artilugios en css.
__________________
Sergio
  #13 (permalink)  
Antiguo 20/04/2006, 17:58
 
Fecha de Ingreso: marzo-2006
Mensajes: 41
Antigüedad: 11 años, 8 meses
Puntos: 0
Al Zuwaga como lo solucionaste: Color de borde = Color de fondo
Hereje gracias por hacelo más "visible"
  #14 (permalink)  
Antiguo 24/04/2006, 14:54
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Ups, perdón por no responder antews. Es que cuando no me suscribo a un tema, pasado un tiempo me olvido de él.


Cita:
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


[email protected], 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::

Cita:
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ú
__________________
...___...
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 17:23.