print out paging with css | page-break-before:always; cross-browser issue!

html css printing cross-browser page-break
designer-trying-coding picture designer-trying-coding · Dec 1, 2009 · Viewed 8.1k times · Source

I have an issue about print paging. you can see my code below. it is not making page break for the print preview :( any idea what can be the problem?

Appreciate helps!

HTML Code

<h1>header text</h1>
<p>Lorem Ipsum jhdfb jdhbg sdfgshdbfgkjhsdbgkjhbs d sdgf</p>    
<div class="pagebreak"></div>

<h1>header text</h1>
<p>Lorem Ipsum jhdfb jdhbg sdfgshdbfgkjhsdbgkjhbs d sdgf</p>    
<div class="pagebreak"></div>

CSS Code

@media screen {
    .pagebreak  { height:10px; background:url(img/page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
@media print {
    .pagebreak { height:0; page-break-before:always; margin:0; border-top:none; }
}

SORTED!!

I moved the pagebreak class to h1, also the html tag (h1) has to be not under any other html tag :/ it was under < div id="wrap"> and then I removed all tags covering h1, and it works well now! WEIRD!!

Answer

Rap picture Rap · Dec 1, 2009

Your code looks perfect. It works great for me using Firefox 3.5.5 and also in IE 8.0. I'll bet you're testing it in a browser that is not CSS2/3 compliant. Change your browser and it'll work great.

This link lists support of CSS3 features: http://www.webdevout.net/browser-support-css

(The state of non-support in browsers is frustrating, isn't it?)

Related questions

How to make a HTML Page in A4 paper size page(s)?

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word? Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions …

Read More
How to print HTML content on click of a button, but not the page?

I want to print some HTML content, when the user clicks on a button. Once the user clicks on that button, the print dialog of the browser will open, but it will not print the webpage. Instead, it will print …

Read More
Landscape printing from HTML

I have a HTML report, which needs to be printed landscape because of the many columns. It there a way to do this, without the user having to change the document settings? And what are the options amongst browsers.

Read More