9

I have a lot of divs on a page with variable amounts of content in them. I am trying to use page-break-inside: avoid; so that each div section is not broken over 2 pages.

It is working in Firefox but not IE8.

I have this in my CSS print file

.page-break-inside-avoid { page-break-inside: avoid; }

and my divs carry the class like in <div class="page-break-inside-avoid">

IE8 is supposed to support this now. Isn't it?

Am I doing something wrong? Anyone solved this issue? Or had any experience with it?

Any help would be great.

thanks a lot richard

Volker E.
  • 5,911
  • 11
  • 47
  • 64
richard moss
  • 339
  • 1
  • 8
  • 13
  • the firat div fits on the page but the second div does not so it is printing correctly on next page but the 3rd div instead on continuing after the 2nd div on the secon page it fills the space on the first page and then contines after the second div and the second page. It also looks like the second div is printing inside the third div. If that makes sense !! please help – richard moss Jan 11 '10 at 23:53
  • It's impossible to know the answer to this without seeing the rest of the code and styling – Gareth Jan 12 '10 at 17:14

3 Answers3

7

Webdevout.net is a great place to check browser CSS compatibility.

For page-break-inside only IE8 and Opera 8+ are shown to support it

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Gareth
  • 133,157
  • 36
  • 148
  • 157
  • 2
    I've found that page-break-inside will *only* work in IE8 when your pages are interpreted in **standards compliance mode**, as opposed to quirks mode. So, make sure you have a valid doctype! See http://www.quirksmode.org/css/quirksmode.html – Chris W. Rea May 04 '10 at 20:26
  • 1
    2016 and up-to-date support table for property at http://caniuse.com/#feat=css-page-break – Volker E. May 03 '16 at 21:00
0

Microsoft Word 2010 does not seem to respect this style attribute when importing from HTML (XHTML 1.0 transitional), i.e. a <div> element may be split.

handle
  • 5,859
  • 3
  • 54
  • 82
0

Without seeing the code I can only guess it is maybe something to do with the height or nesting of the divs you're trying to apply it to. Could even be the width as remember both Print Previews in IE and FF will have different viewport dimensions (from the normal browser viewport and each other), a few pixels out could completely change the display of it

Alex
  • 1,584
  • 1
  • 19
  • 29