WordPress.org

Forums

Adamos
[resolved] li not displaying inside a ol (14 posts)

  1. Pvanania
    Member
    Posted 10 months ago #

    I can't get the numbers to display inside a ol? Help me! Thanks :)

    http://ananiamedia.com/?p=957&preview=true

  2. CrouchingBruin
    Member
    Posted 10 months ago #

    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.

  3. Pvanania
    Member
    Posted 10 months ago #

  4. CrouchingBruin
    Member
    Posted 10 months ago #

    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.

  5. Pvanania
    Member
    Posted 10 months ago #

    But the numbers still aren't displaying :(

  6. stephencottontail
    Member
    Posted 10 months ago #

    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 {}

  7. Pvanania
    Member
    Posted 10 months ago #

    it is still not working :(

  8. CrouchingBruin
    Member
    Posted 10 months ago #

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

    ol li {
       display: list-item;
    }
  9. stephencottontail
    Member
    Posted 10 months ago #

    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.

  10. CrouchingBruin
    Member
    Posted 10 months ago #

    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.

  11. Pvanania
    Member
    Posted 10 months ago #

    Thank you!

  12. stephencottontail
    Member
    Posted 10 months ago #

    @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.

  13. stephencottontail
    Member
    Posted 10 months ago #

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

  14. CrouchingBruin
    Member
    Posted 10 months ago #

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

    ol {
       list-style: decimal inside;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.