Html Page Break not working

Question

Trying to set a page break in the page I'm working on but in the print preview I'm still seeing things on the page that aren't supposed to be there. Can't figure out why this isn't working.

In my css style:

.applicant-break hr {page-break-after:always;}

In my ASP.NET code...partial view of code the start tags are there:

<b>Resume</b>
<br />
<asp:Literal runat="server" ID="litResume"></asp:Literal>
<br />
<br />             
<hr class="applicant-break" />
</ItemTemplate>
</asp:Repeater>  
</asp:Panel>

Any help would be appreciated.

Answer 1

Your css needs to be

hr.applicant-break {page-break-after:always;}

EDIT:

Doing some reading on the W3Schools website , it seems this css property is meant for table elements

"Set the page-breaking behavior to always break after a table element"

EDIT:

Doing some more reading, it seems browsers do support more than the table element, however some browsers have trouble with it on HR and BR tags ( Reading here )

try putting a div after the hr like so

<hr />
<div class="applicant-break"></div>

and changing your CSS to

div.applicant-break {page-break-after:always;}

Answer 2

So apparently I'm silly, I was trying to trust the print preview of Chrome instead of just actually printing it myself, upon printing it I see that the page break does in fact work, thanks for your assistance mt! :)

So fair warning to anyone else reading this, while it is useful it doesn't always give you an accurate look at your print job all the time.