Definir margin teniendo en cuenta el height de un bloque (jQuery)

[MRBarto]

Hola,

Tengo un header en posición fixed, flotando por encima del contenido de la pagina. A veces tiene mensajes de alerta lo cual hace que sea mas alto, por lo que necesito que el margin superior del resto del contenido de las paginas dependa del height de este header.

Lo pude lograr de esta manera:

$('body').css('margin-top', $('#top').height()+20);

El problema es que a veces el margin es mayor de lo que debería ser. No logré determinar por qué pasa esto, ya que simplemente a veces el cálculo lo realiza perfectamente, y otras no (en Google Chrome casi siempre lo calcula mas, dejando un margen extra)

ALguien sabe si estoy haciendo algo mal o existe una manera más efectiva de hacer esto y que el margen este bien seteado desde el inicio de la carga del DOM?

Gracias!

[mayid]

Quizas tenga que ver con el box modeling. Vos reseteas tu hoja de estilo CSS, quitando margenes y padding?

Tenes un enlace a tu web?

[MRBarto]

Si mayid! Tengo un CSS Reset de todo... Lamentablemente no me dejan mostrar nada directamente, pero si podés darme más info sobre eso que comentas podría investigar más por ese lado?

EDIT: Testeando un poco más, me di cuenta que el margen extra sólo aparece alguna veces luego de hacer un refresh a la página, y como si le estuviese sumando el margin al margin anterior... Esto ultimo lo pienso porque cuando el margin-top correcto debería ser 129px, a veces al actualizar la pagina se convierte en 278px (2 x 129px + 20px)

Habrá alguna manera de asegurarme que el $('#top').height() se le asigne comenzando desde "0"?

[mayid]

Testeando un poco más, me di cuenta que el margen extra sólo aparece alguna veces luego de hacer un refresh a la página, y como si le estuviese sumando el margin al margin anterior

Algo así me pasó con Chrome hace un tiempo, con un layout muy muy sencillo. No se que es lo que cause el problema :o(

Data sobre lo que pedías: http://api.jquery.com/height/

Pregunta: estás incluyendo imagenes es el div que queres medir?

[MRBarto]

Parece que pude solucionarlo utilizando "$(window).load" en lugar de "$(document).ready"

El problema ahora es que por medio segundo inmediatamente luego de la carga el margen no está seteado, por lo que el contenido de la pagina se "mueve" hacia abajo cuando la pagina termina de cargar...


Edit con SOLUCIÓN: Parece que era mucho más fácil de lo que parecía... Moví el include del CSS antes que los .JS y ahora parece estar funcionando todo correctamente. Créditos a http://36flavours.com/2010/01/jquery-document-ready-bug-in-safari-webkit/ aunque el problema lo tenía en Chrome y no en Safari.

[mayid]

Muy buena solución! Tomo nota. Gracias.