WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Pvanania
    Member
    Posted 3 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 3 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 3 months ago #

  4. CrouchingBruin
    Member
    Posted 3 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 3 months ago #

    But the numbers still aren't displaying :(

  6. stephencottontail
    Member
    Posted 3 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 3 months ago #

    it is still not working :(

  8. CrouchingBruin
    Member
    Posted 3 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 3 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 3 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 3 months ago #

    Thank you!

  12. stephencottontail
    Member
    Posted 3 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 3 months ago #

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

  14. CrouchingBruin
    Member
    Posted 3 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.