Menu
Dear all, I tried CSS Position: Fixed Property but it does work properly on Firefox and IE(hack for IE6), but it's not working at all for Chrome. I thought Chrome being the latest will support it very easily but still it isn't. I Tried out <thead>,<tfoot><tbody> again works in IE and Firefox, but problematic in Chrome. Please any one have an alternate solution to it.
767
It seems like Chrome[webkit] has different way of handling position:fixed in print stylesheets than the rest of the browsers.
So the current answer to this question is:
There is no adequate solution for this in Chrome.
Whereas FF and IE render it on Every page, Opera doesn't show it at all, and webkit browsers only show it on the first page.
small test file:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>print css test by mtness</title>
<style type="text/css">
@media print {
#watermark {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 5;
}
p {
position: relative;
top: 40pt;
display: block;
page-break-after: always;
z-index: 0;
}
}
</style>
</head>
<body>
<div id="watermark">AWESOME!</div>
<p>page1</p>
<p>page2</p>
<p>page3</p>
</body>
</html>further resources might be found here:
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/
test page:
http://www.andypemberton.com/sandbox/watermark/
HTH. Kind regards, mtness.
61
Edit: Apparently the bug has been fixed, so the library I share below may not be of much use anymore.
From all of my research, it is correct that there is no way to get position: fixed to work in Chrome. Here is a link to the bug on the Chromium project page.
In the meantime, I have created this open-source project that allows you to print headers and footers in Chrome. It is early in development but it works, depending on the structure of your HTML layout:
It is a work-in-progress, and it relies heavily on the CSS Regions Polyfill. But I am using the techniques in this library to very good effect on a project at work.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
