{"id":2084,"date":"2012-02-07T10:30:10","date_gmt":"2012-02-07T10:30:10","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?p=2084"},"modified":"2012-02-07T11:34:43","modified_gmt":"2012-02-07T11:34:43","slug":"page-break-after-failing-with-positionabsolute-and-floated-elements","status":"publish","type":"post","link":"https:\/\/www.simonbattersby.com\/blog\/2012\/02\/page-break-after-failing-with-positionabsolute-and-floated-elements\/","title":{"rendered":"page-break-after failing with position:absolute and floated elements"},"content":{"rendered":"

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<\/code>. So far so good.<\/p>\r\n

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<\/code> 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.<\/p>\r\n

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.<\/p>\r\n

So, to summarise, with the following html structure:<\/p>\r\n

<table>\r\n<tr>\r\n<td><div><p>Some text<\/p><\/div><\/td>\r\n<\/tr>\r\n<\/table><\/pre>\r\n
and this css:<\/p>\r\n
table{page-break-after:always}\r\ndiv{position:relative}\r\np{position:absolute}<\/pre>\r\n
then Firefox 10 does not honour the page-breaks, but IE8 does. Making the css:<\/p>\r\n
table{page-break-after:always;}\r\ntd{border-bottom:1px solid transparent}<\/span>\r\ndiv{position:relative}\r\np{position:absolute}<\/pre>\r\n
results in Firefox 10 printing correctly.<\/p>\r\n","protected":false},"excerpt":{"rendered":"
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. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[26,21,27],"class_list":["post-2084","post","type-post","status-publish","format-standard","hentry","category-web-design-and-build","tag-firefox-10","tag-ie8","tag-opera-11"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/2084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=2084"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/2084\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=2084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/categories?post=2084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/tags?post=2084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}