How to avoid page breaking when printing long lists

Question

I'm doing some styling for a printable brochure on my client's site, which could potentially contain long unordered lists of information.

My issue is when printing in Firefox the entire <UL> will break on to a new page instead of it's children <li>'s splitting, which means it doesn't flow with other content on the page.

I've found the CSS property page-break-inside is only supported in Opera and IE8, does anyone know of an alternative to this property or another method that I can use to prevent the entire list breaking on to a new page.

Cheers!

UPDATE [23.11.2011]: I was able to use a work around on my issue, as the printed document is generated in response to a user's selection so this page is only ever going to be print I (very reluctantly) pushed semantics aside and removed the UL and replaced LI's with DIVs, which break correctly. The question still stands though, for anyone with a similar issue but using the same HTML for print & screen.

I will reproduce the problem I was having and post the necessary HTML & CSS as soon as I can.

Answer 1

Consider programmatically removing the UL tags for the print version. You should be able to get the LI elements to display the same with some styling.

JavaScript or even jQuery can handle this easily enough but I bet you could take care of this server side instead.

I know it's not technically valid HTML but sometimes you have to bend the rules when HTML/CSS doesn't offer you flexibility.