Member Avatar for SolidSolutions

I have a sticky header on my page by setting CSS to relative and z-index.

When I go to print, the first page prints fine (header, with page content starting just below header). The following pages has header on top of content.

How can I force content below header on every page that is printed, or unstick the header so it only prints on first page?

Thank you!

  • 3 Contributors
  • 3 Replies
  • 2K Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by henk_2

Dani AI

Generated

What you are seeing, , is the print engine repeating a fixed/sticky element on each page but not reserving space after page 1. Changing z-index only affects stacking, not flow, so the body keeps flowing under the header. is right that the fix belongs in a print stylesheet; the simplest cross-browser approach is to unstick the header when printing so it appears once and content flows normally.

/* 1) Unstick header for print (single appearance on page 1) */
@media print {
  header, .header, #header {
    position: static !important;   /* or relative */
    top: auto !important;
    z-index: auto !important;
    float: none !important;        /* ensure it participates in normal flow */
    transform: none !important;    /* avoid new stacking/containing contexts */
  }
}

If you truly need a header on every printed page without overlap, do not use position:fixed in print. Let the print engine repeat it and reserve space by switching to table header/footer groups:

/* 2) Repeat on every page without overlay */
@media print {
  header, .header, #header { 
    position: static !important;
    display: table-header-group;   /* repeated at top of each page */
  }
  footer, .footer, #footer {
    display: table-footer-group;   /* repeated at bottom of each page */
  }
}

Troubleshooting tips: ensure the print rules load after your screen CSS (or in a separate print.css). LANSA and some frameworks inject inline styles; target the exact header selector and use !important only where an inline style wins. Also clear any parent transforms/filters on print (they create new containing blocks that can break positioning). Finally, ’s position:absolute !important still removes the element from normal flow; prefer static or relative for print so content is reliably pushed below.

Recommended Answers

All 3 Replies

Member Avatar for almostbob 
body { bla bla bla }
.header { bla bla bla fixed }
.footer{ bla bla bla fixed }
a{ bla bla bla }
div{ bla bla bla }

@media print { body { blaa blaa blaa }
.header { blaa blaa blaa }
.footer { blaa blaa blaa } 
.menu { display:none; } // menu not neede3d on print page
a { blaa blaa blaa }
div { blaa blaa blaa }
}

using the media type print you can give different style .footer to the printed page from the screen page, add copyright notices to priinted pages, hide nav menus from printing, print addresses & all sorts of fun stuff, set appropriate print fonts and make your printed page as individual as the screen page
@media types for screen all handheld print text-to-speach allow flexible styling,
not setting a mediatype == @media all
so it s only neccessary to define in @media print those elements that are to be hidden or different to the screen page

Setting the z-index of the header = 0 will make the body flow around it,
setting the z-index < zero makes the text run over, setting the z-index > 0 makes the text run under, both these look the same when printing (bad, oveerstrike)

.header { top:0; bottom:auto; z-index:0; position:fixed; left:0; width:100%;}

has my header working on pages 1-5 of screen and print

Edited by almostbob because: n/a
Member Avatar for SolidSolutions

I guess that is why I couldn't figure it out...I tried all that and thought it should work, but it is not. Seems like something crazy with LANSA. I'm able to set header to display: none in Print media and it hides it, but everything else leaves it on top of every page, covering content except on page 1.

Thanks though...hopefully will help someone!

Member Avatar for henk_2

position:absolute !important ;

Edited by henk_2
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.