I have an issue with page-breaks and css:
I have this html-code (which is generated by php)
<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>
My css is this:
.form-table.courses {page-break-after:always;}
Above will generate 4 pages because it sets page-break even after the third div above. Is there any "simple" way of achieving to just get 3 pages?
I was thinking of last-child property of css, but what I understand there are not support for this in IE8 and below - and that's not good enough (It must at least handle ie8 - preferebly ie7 as well).
Of course I could add a class for the last div and then modifiy the css like this:
<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses lastpage">
coursename and pupils...
</div>
and add this line to my css:
.form-table.courses.lastpage {page-break-after:"";}
Is my solution the only one to have some kind of cross-browser compability? Or am I missing some attribute/value of css that I should use instead?