Fixed that message headers overflows message body

[nikitachernov]

Apparently, in some projects message headers can overflow top-part of the rich message body. Tested in Chrome 13, FireFox 6 and Safari 5.

[ryanb]

I had to revert this because it was causing a large gap at the top while working in Safari. Can you be more clear on what this fixes?

[nikitachernov]

Ok, I got it now.

Div '#message_headers' has "position: absolute" property. It means that it floats over the top of the page.
And then at the bottom of the file there are: "body { margin-top: 96px; }".
So, the following happens:

1. Gap is created manually.
2. Div '#message_headers' overflows this gap.
3. Everything looks good... unless someone has "body{ margin: 0; }" set up in their email template and now '#message_headers' hides part of the mail :)

So, in order to make your preview page more agnostic to users' CSS, it's better to use
"position: static;" in '#message_headers' and to remove "body { margin-top: 96px; }".
Then '#message_headers' will push everything down above itself and no manual gap is needed anymore. Sorry for not noticing that from the first time :)

[ryanb]

So if we make it static and then remove the body margin maybe that will improve it? Need to do some testing.

[nikitachernov]

Yes, it will. The body margin seems to be the only property that may conflict with users' CSS. Others are wrapped by '#message_headers'.
Thanks!

[josephers]

If we do it this way, #message_headers will be subject to the body padding. This can create a gap around the edges.

Another solution is to specify !important on the margin-top property. (#10)

[ryanb]

Thanks @josephers, I will pull that change in.

@nikitachernov if this does not solve the issue please open a separate issue.

[nikitachernov]

Works great!