Nested Lists Redux

  • Unknown's avatar
    dewaynedulaney814118498 · Member ·

    Follow-up thread to my previous about Nested Lists. Thanks to all who replied. Circumstances prevented me from follow up until now.

    To member cookgardensew: Your code worked beautifully–in the editor. But when I did a preview of how it would display when published, results were mixed.

    Good news: It did indent properly and do the nested list. Bad news: it ignored your type tags and chose the wrong number/letter types.

    The type of numbering lettering you chose, and what I wanted was:

    I. II. A. B. 1. 2. a. b. c. III. (Shown without indents/nesting)

    What the preview produced was:

    1. 2. a. b. i. ii. i. ii. iii. 3.

    Any thoughts? I did read the tutorial page you linked to about the type tags.

    Here’s a link to a site that shows the output effect I want, called a Harvard outline type:

    <a href=”http://www.mpsaz.org/mtnview/staff/tablair/en-09/files/example.doc
    http://www.mpsaz.org/mtnview/staff/tablair/en-09/files/example.doc”>http://www.mpsaz.org/mtnview/staff/tablair/en-09/files/example.doc

    Your code aligned with this effect, but WP so far is ignoring the type tags in the output.

    Dewayne Dulaney

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    I assume you’re speaking of https://en.forums.wordpress.com/topic/nested-list-items-indent-too-far-to-right/?

    Note that mentioning a specific user in this forum does not ping them, so there’s no way for @cookgardensew to be aware of this thread unless they happen to stumble upon it themselves.

    Can you please provide a link to the post/page, or the title of the draft post/page where you added the code for nested lists and where it is not being rendered correctly?

  • Unknown's avatar
    dewaynedulaney814118498 · Member ·

    Shortlink to the new draft post: https://wp.me/p9aTup-c5

  • Unknown's avatar
    dewaynedulaney814118498 · Member ·

    And yes, I was referring back to my previous topic:

    https://en.forums.wordpress.com/topic/nested-list-items-indent-too-far-to-right/

    Sorry about not including the link. The issue is still unresolved.

    The code @cookgardensew provided, as I said, produced good results in the visual editor screen. Both the indenting shows correct and the list item styles or types are correct. But in the post preview screen, the output is the opposite of what the code calls for in the list items. Upper case Roman numerals show as Arabic. Upper case alpha letters show as lower case. Arabic numerals show as lower case Roman.

    Hopefully there is a solution. As I’m a newbie with code, I am at a loss how to solve it.

  • supernovia · Staff ·

    Thanks @ dewaynedulaney814118498. Things have changed a bit since July, so can you let us know which editor you’re using currently?

    I wanted to note too, in my testing, my theme stylesheet sometimes overrode my type settings. So you might try using this HTML instead:

    <ol style="list-style-type: upper-roman">
	<li>Item One</li>
	<li>Item Two
		<ol style="list-style-type: upper-alpha">
			<li>Sub Item</li>
			<li>Sub Item
				<ol style="list-style-type: lower-roman">
					<li>Sub-sub Item</li>
					<li>Sub-sub Item
						<ol style="list-style-type: lower-alpha">
							<li>Sub-sub-sub Item</li>
							<li>Sub-sub-sub Item</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
	</li>
    <li>Item Three</li>
</ol>
  • Unknown's avatar
    dewaynedulaney814118498 · Member ·

    The editor I’m currently using is the one you can access from the home page of the blog by clicking on the “+write” button. I also access it from clicking on the My Site button there and going to Manage > Blog Posts > Add.

    When looking there just now I saw a notice about a new editor coming but haven’t tried it yet.

    Question: is there something in the code itself that orders the nesting or indenting to take place, or do you manually indent using the keyboard (tab or spacebar)?

    Am eager to try the new HTML provided, but it will probably be tomorrow night before I can.

  • supernovia · Staff ·

    I just added that space so it’s a little easier to see where one list starts and another one ends. Normally I’d just use two spaces rather than a full tab, personally, but I hope that helps anyhow.

  • supernovia · Staff ·

    I wanted to note as well, if you do use the new editor, be certain to choose an “HTML” block rather than trying to paste HTML into a regular block.

  • Unknown's avatar
    dewaynedulaney814118498 · Member ·

    Hi supernovia,

    I tried your code just now and it works great. However, I would also like to use arabic numbers (some call them “decimal”) in some of the subheadings (e.g., 1, 2, 3). I tried substituting the tag “decimal” for “lower-roman” but WP still overides that and keeps the lower roman.

    Is there a different tag used for decimal numbers that WP accepts?

  • supernovia · Staff ·

    Decimal should work:
    https://www.w3.org/wiki/CSS/Properties/list-style-type

    <ol style="list-style-type: upper-roman">
	<li>Item One</li>
	<li>Item Two
		<ol style="list-style-type: upper-alpha">
			<li>Sub Item</li>
			<li>Sub Item
				<ol style="list-style-type: decimal">
					<li>Sub-sub Item</li>
					<li>Sub-sub Item
						<ol style="list-style-type: lower-alpha">
							<li>Sub-sub-sub Item</li>
							<li>Sub-sub-sub Item</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
	</li>
    <li>Item Three</li>
</ol>
  • The topic ‘Nested Lists Redux’ is closed to new replies.