WordPress.org

Support

Support » Themes and Templates » [Resolved] li not displaying inside a ol

[Resolved] li not displaying inside a ol

Viewing 13 replies - 1 through 13 (of 13 total)
  • You posted a link to a page that hasn’t been published, or else the address is bad, so I can’t see what’s on it.

    I don’t know why the theme developer did this, but he/she added the following rule to the CSS file:

    ol li {
       display: inline-block;
    }

    This rule is making all of the list items for an ordered list appear on a single line. This rule, in my opinion, is overly broad. There are many instances in which list items are made inline (in menus, for example), but in those cases, a class selector should be used so the rule doesn’t affect every single use of ordered lists by default.

    So, what you can do is add this CSS rule:

    ol li {
       display: block;
    }

    You shouldn’t edit the theme’s stylesheet directly (unless it’s a custom theme made for your site), but use a CSS plugin like Custom CSS Manager.

    But the numbers still aren’t displaying 🙁

    Moderator stephencottontail

    @stephencottontail

    I’m not sure exactly why, but explicitly setting display: block on an <li> element suppresses the list-style property on the container <ol> element. So instead of using display: block, you should delete the line entirely and leave it blank:

    ol li {}

    it is still not working 🙁

    Hmm, actually it’s supposed to be list-item, but that doesn’t seem to work either:

    ol li {
       display: list-item;
    }

    Moderator stephencottontail

    @stephencottontail

    It looks like the numbers are there, but they’re sitting off-window. Try something like this:

    .entry-content ol {
        margin-left: 3em;
    }

    That will move the list to the right a bit, without affecting any other lists on the page. You can replace the 3em with any other measurement and see if you like the way it looks.

    Good pull. I wonder what’s the underlying rule, though, that’s shifting the content to the left? I couldn’t seem to find it in the CSS.

    Thank you!

    Moderator stephencottontail

    @stephencottontail

    @crouchingbruin: From what I’ve read, by default list bullets exist outside the content flow. In this case, the containing element contained no left margin and the list itself only contained a left margin of 0.5em. Because the bullets technically aren’t part of the <li> element, they appear off-window. Setting list-style-position: inside makes the bullets part of the <li> element, meaning that they appear correctly.

    Moderator stephencottontail

    @stephencottontail

    Here’s a Fiddle that shows the difference: http://jsfiddle.net/9H2xK/

    Ah, OK, thanks for the explanation. So the rule for ol needs to be changed to:

    ol {
       list-style: decimal inside;
    }

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Resolved] li not displaying inside a ol’ is closed to new replies.