View Single Post
Old 08-28-2014, 11:08 AM   #30
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,561
Karma: 20150435
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Psymon View Post
The only little "quirk" that I found was that for the <h1> heading that comes after that full-page image, I'd set the style to include top-margin:42px, so that all those <h1> titles would be moved down a bit from the top of the page. That seems to end up getting ignored, though, if I have the code for the full-page image before it, and so what I did was "manually" set the style for that particular <h1> tag to margin-top:0, and then put a <p> tag above it with a line-height:42px.
Do you set a manual pagebreak (page-break-before/after:always) between the image and the <h1>? If you do, this is known and allowed behaviour: vertical margins at forced pagebreaks can be ignored.

Two other solutions:

- Use padding-top instead of margin-top. Padding should not be ignored. (Not an option if you have borders or background, though.)

- Use a dummy element after the pagebreak. This is something like your solution, but keep your margin-top in the <h1>. Or actually use the dummy element to introduce the pagebreak:

Code:
<div class="full-page-image">
<img ... />
</div>

<div class="pagebreak" style="page-break-before:always; height:0; margin:0; padding:0"></div>

<h1 style="margin-top:42px">Title</h1>
Jellby is offline   Reply With Quote