I had occasion to use the page-break-* properties today. It all came to that because I had to recode part of the ‘ website so it would print properly. You know what I mean when you print something and it cuts off half an image - it doesn’t look professional and it can get quite annoying.

After a little Google searching I found a great guide to print css files at (I’ve been there a few times before, too). It was very informative and then after a little more searching, I found something on page-break-after and page-break-before.

What a problem that turned out to be. I was using the page-break-after property and wasn’t having any luck. I applied it to a <div>, and then to an named anchor. The problem was that in IE it printed as is regardless, ignoring the page-break-before and page-break-after properties. FireFox on the other hand, ignored the -first- instance of such a property but after that printed correctly. (WebDevout has a good page on browsers and CSS support)

The workaround was obvious then - for the first required page break, do it twice. So on the named anchor I added the class ‘printspacer’ with the following CSS:

.printspacer {
page-break-before: always;
}

Then I added it again, to a second named anchor immediately afterwards. For every occurrence after that I only needed to do it once though; anyone know if this is a recognised bug in FireFox?

As I mentioned though, IE doesn’t recognise the page-break-* properties. Bit of a pity really as I’m even using IE7 and I thought that it had better CSS support (even though those properties are CSS2 properties).