Page breaks and list styles...is there a secret I dont know?

[nickatwork]

Hi all,
Im struggling to understand why step 4 (image below) is not breaking to the next page.
styles are as follows...

<li>
page-break-insde = avoid

<questionheading> (class of <li>)
page-break-after = avoid
page-break-inside = avoid (ineherited from <li>)

<p>
none

<answerbody> (class of <p>)
page-break-sinde = avoid

Now I would have thought that the page-break-after set on the questionheading style would be enough to keep the question text with the text below. But it just wont move to that next line. Any tips?

[JenShumate]

Page breaks give me fits too You may want to try setting "page-break-before" to "avoid" on the answerbody class. If that doesn't work, try also changing the questionbody class to "auto" for all of the page break stuff. I've found that "avoid" does not mean "never", so page breaks may occur no matter what you do - from what I've seen so far, at least.

[Andrew]

That screen cap appears to be Flare's UI. Does the issue occur in the output, or only inside Flare itself?

[nickatwork]

Yes that is the Flare preview pane, but it does the same when I preview and build the output. I tried changing which stlye has the page break. answerbody break before = never, still nothing.

Man this is making it almost as difficult as just using Word as the output. ggrrrr

[nickatwork]

Got it, had to set the page break on the <ol> style. Interesting, I would have thought if nothing was set on <ol> then it would take what was set as <li>.
I always imagined styles as working in a top down way.....

[LTinker68]

I always imagined styles as working in a top down way.....

Only in the sense that the child will inherit from the parent if nothing is specified in the child. A better way to think of it is the style closest to the content wins. In this case, whatever style is closest to the image wins, so an inline style on the img tag has highest priority. If there's no inline styles, then the img tag (or class of img tag). Above that is the container tag (the li). Above that is the ol tag, above that is the body tag, and so on.

I would expect the <li> tag's property to control it, too. By setting it on the ol tag, it will work in this particular instance, but if you have a longer list then it would try to keep the whole list together, which could really screw up the spacing. You might also double-check that you don't have a complex selector in the stylesheet. For instance, you have a paragraph following the list. If you have a complex selector that has a larger top margin on a paragraph when it follows an ol tag, or has page-break-before set to always on the paragraph, or some other setting, then it's possible that the complex selector was overriding the li style.

[nickatwork]

Yeah thats basically what I understood, so the <li> being essentially ignored in this case is a bit puzzling. I'm not using complex selectors at all so thats not an issue.
The page break after setting on the <ol> tag seems to be working well enough.

[ekaren]

Would you mind posting your code so that I can see how you got it to work? (I'm having similar issues with images in lists.)

[nickatwork]

I have since moved all my <li> classes, and their page break settings to <olu> and <ul> tags.

Im not sure if it is a bug or something, but I couldnt never get the <li> tag to be used to set the page break.

Images might cause a different issue altogether. If the image is in the list block, then it will behave however you have setup the list breaks. but if your image is in its own style block, then page break settings will need to be set for that too.

Post a screenshot.