I'm trying to create a page with HTML content that looks like this:
https://cdn.shopify.com/s/files/1/0355/3849/files/InstallingTekToolbarsWin64Office32.pdf
(the "outline-numbered" section that starts on Page 2), but I'm having trouble with nested <OL> elements. If I attempt to create nested <OL> in the Shopify web-based editor by inserting an ordered list, typing the elements, and then indenting/outdenting with the toolbar buttons, I get code like this, where the parent item's </li> appears before the child's opening <ol>, like this:
<li>Outermost level, element 1</li>
<ol>
<li>Indent 1, element 1</li>
<li>Indent 1, element 2</li>
<li>Indent 1, element 3</li>
<!-- that closing tag shouldn't appear yet!-->
<ol>
<li>Indent 2, element 1</li>
instead of before it. The Mozilla HTML guide shows that the parent item's closing </li> tag should enclose the entire nested <ol> element, e.g.
<ol>
<li>first item</li>
<li>
second item
<!-- closing </li> tag is not here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>
<!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>
so as a result, my nested lists do not render properly.
Does anyone else see this same symptom when using the Shopify page editor? Is there a workaround?
I really don't want to have to hand-edit HTML on all of my pages that contain nested lists.
Thanks!
