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

I have an issue about print paging. you can see my code bel开发者_开发问答ow. 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!!

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