Forum How do I...?

Elements at the top edge of the page

Cuberic
I'm trying to put a header at the top of every page.

My CSS looks like:

@media print {
  @page siv-ind-pages {
    size: A4;
    margin: 80px 10px 10px 10px;
    prince-shrink-to-fit: auto;
    background: #f9f8f6;
    @bottom-right-corner {
      content: "Page " counter(page) " of " counter(pages);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
}

    @bottom-left {
      content: "Health Information System";
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
}

    @top {
      content: flow(header);
}
}

  .siv-r-ind-his .siv-r-header {
    flow: static(header);
  }

  .siv-r-ind-his .siv-r-page-break {
    page: siv-ind-pages;
  }

}


My header fits in the margin, but the margin doesn't start at the top of the page.

There looks to be a 20px margin between my header and the edge of the page. How would I get my header to sit right up at the top of the page so I can adjust the padding/margin myself.
  1. test.pdf182.7 kB
    Test file that i've been working on. It's still a work in progress with the footers / headers
mikeday
Does the header block itself have some margin or padding?
Cuberic
I had removed the margins in the example I provided.

Anyways I solved my problem. The solution was to set a height on headers container. There is still a little bit of space between the edges, but I can live with that.