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

Question

Hi friends,

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 1

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?)