page-break-after failing with position:absolute and floated elements

In the last couple of days I’ve been working on a small application to print raffle ticket numbers, which requires a certain number of tickets to be printed per page. In a simple case I was able to generate four consecutive numbers per page and then enforce a page-break via page-break-after:always. So far so good.

I then floated some elements within the page, which caused the page break to fail in every browser I tried (including FF10 and Opera 11 – and if it doesn’t work in both of those, something’s wrong…). This persisted even with the floated elements enclosed in non-floated elements to which page-break-after was applied. Some Googling suggested floats don’t play nicely at all with page-break, so with gritted teeth I used tables instead, and all was well.

Later, I needed use absolute positioning for the ticket numbers. You can’t use absolute positioning directly within a td element, so I included a div nested within the td. This broke the page-break again. Fine without absolute positioning, broken with – tested in FF10. Amazingly this fails in FF10 but works in IE8 (and that’s not a phrase I’ve written often). Investigating this I added a border to the td element, just so I could see what was happening on the page, and all of a sudden everything was fine again. By experimentation, a single border on the td fixes the problem in FF10 – even if it’s transparent. Weird.

So, to summarise, with the following html structure:

<table>
<tr>
<td><div><p>Some text</p></div></td>
</tr>
</table>

and this css:

table{page-break-after:always}
div{position:relative}
p{position:absolute}

then Firefox 10 does not honour the page-breaks, but IE8 does. Making the css:

table{page-break-after:always;}
td{border-bottom:1px solid transparent}
div{position:relative}
p{position:absolute}

results in Firefox 10 printing correctly.

Tags: , ,

2 responses to “page-break-after failing with position:absolute and floated elements”

  1. Santiago says:

    Thanks. I´m from Argentia. Your article save my ass! I expend days traying to solve this problem on firefox.
    Thanks and sorry my bad english!

  2. eugenio says:

    Thanks.I´m from Argentia too.Your article save my ass too. I expend 2hs 😀 and until to find your post
    Thanks. my english id to match bad!!!!!!!

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.