Log in / Register

Forum › How do I...?

Header Size for first page

mikeosbornma
Is there a way to increase the header margin for just the first page of a document?
I'm converting HTML to PDF and am using a CSS file to manage the page layout.
I've tried things like:

@page:first {
margin-top: 6in;
}

and many variations but it always seems to be that the margin remains the same as the rest of the document.
Other overrides work in the @page:first, but not margin.

Thanks,

-Mike
mikeday
That should work, try this test document:
<html>
<head>
<style>
@page:first {
    margin-top: 6in;
}
</style>
</head>
<body>
<h1>First page</h1>
<h1 style="page-break-before: always">Second page</h1>
</body>
</html>
mikeosbornma
The test example seems to work fine, so it must have something to do with my HTML.

I've created a visible border and no matter what I set for margins (on the first page or others) the margin is the same.
I don't have a lot of control over the generated HTML (its the output of another tool) so I have to do this with a css file on the command line.

What I'm really trying to do is to put an image at the top layer for the first page. Is there a way this can be done? I've looked through the forums and tried and played around with setting z-index but can't seem to find a formula that puts the image in the foreground (it does exist where I wanted it in the background though).

So, increasing the margin was my next attempt at creating space for the cover image, but adding "margin-top" to the @page:first block doesn't seem to be working.

Thanks, Mike
mikeosbornma
I found a work around by inserting the image before the header:

h1:before {
content: url("Image.png");
}

I would like to figure out the margin issue, but its not blocking progress now.

Thanks, Mke