Print paging with css | run-in pages before: always; cross browser problem!

Question

I have a problem with the search call. You can see my code below. he doesn't take a page break for print preview :( any idea what could be the problem?

Valuing 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) should not be under any other html tag: / it was under <div id = "wrap">, and then I removed all the tags covering h1 and it works fine Now! WEIRD !!

Answer 1

Your code looks perfect. It works great for me using Firefox 3.5.5 as well as in IE 8.0. I bet you are testing it in a browser that does not meet CSS2 / 3 requirements. Change your browser and it works great.

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

(The carrier state in browsers is frustrating, isn't it?)