I'm having trouble printing a web page of information, which should span onto about 3 pages. Currently, only 1 page is printed, and the rest of the data is not visible anywhere? Is there some JS or HTML I can use to break the page, and allow the information to continue being printed on the next pages.
+2
A:
You need a print stylesheet, and it should have height set to "auto" and overflow set to "visible" for the body. What I do is something like:
@media print {
html, body { height: auto; overflow: visible; }
}
Just put that in your main CSS file or in a file of its own.
Pointy
2010-10-28 13:19:55
Yes I already have these properties set in a print stylesheet :S
Derek Paring
2010-10-28 13:21:42
Well try adding "! important" after "visible" and before the semicolon.
Pointy
2010-10-28 13:26:42
A:
You can also force your breaks
<style>
.break { page-break-before: always; }
</style>
<body>
content on page 1...
<h1 class="break">text of Heading 1 on page 2</h1>
content on page 2...
<h1 class="break">text of Heading 1 on page 3</h1>
content on page 3...
<p class="break">content on top of page 4</p>
content on page 4...
</body>
Aaron R
2010-10-28 13:47:20
+1
A:
There's a pretty good article on A List Apart about preparing your site for print.
There is a known bug with floated divs getting cut off, it might be worthwhile for you to take a look.
A List Apart / CSS Design: Going to Print (See the section: Fixing a float flub)
Hope this helps!
Cyrena
2010-10-28 14:11:28