List numbers in a PDF output

[spatte22]

Hey there,

I uploaded an image of an odd issue I'm having. I've done a fair bit of research from a general Google search, but haven't found anything remotely relevant (styling PDFs with html/css isn't the most common thing in the world...).

Let me explain the attached screenshot:
The middle of the image shows a pagebreak in the pdf. This pagebreak separates the #2 <li>. For some reason, the actual #2 icon repeats on the new page, even though it shouldn't (it's all part of the same <li>). This makes the task list look like it has two step 2's, and that the information on the next page is somehow a separate step.

Any ideas of a property that I can use to avoid this? I have a quick-fix, which is adding a pagebreak to bump the entire step #2 onto the new page, but for the document overall, I'd rather have longer <li>'s be able to span from one page to another.

Thanks!

[ajturnersurrey]

I've been noticing something related, where my <li> list item contains a couple of paragraphs and a div.
This can make the list item number appear beside the last item in the set, rather than the first.
To correct this confusion I put everything in the list item inside one div, so the structure looks like:

Code: Select all

<li>
   <div>
      <p>content 1</p>
      <div>content 2</div>
      <p>content 3</p>
   </div>
</li>

[Psider]

You could try 'page-break-inside: avoid' on the li element.

[spatte22]

Ah, that's a good idea, aj, I'll have to see if that was related to the issue!

@Psider - I've tried toying around with page breaks, but ultimately it doesn't work well since some steps have a decent chunk of content that I wouldn't want to bump to the next page.


I sorta "hacked" the issue (or rather, found a workaround) by simply adding in manual MadCap Pagebreaks to make it sort of work. There are one or two spots in my document that could have better spacing, but whatever, it worked well enough for the timeline I was given .