Nested listed appear to be formatted incorrectly (a) Bulleted lists nested in numbered lists continues to show the numbers (b) Numbered lists in bulleted lists continues to show the bullets (c) In both cases, the nest list shows in a larger font size

How they should appear:

Example 1

  1. Ordered list one
  2. Ordered list two
  3. Ordered list indented:
    • Indented Bulleted list one
    • Indented Bulleted list two
    • Indented Bulleted list three
  4. Ordered list four
  5. Ordered list five

Example 2

  • Bulleted list one
  • Bulleted list two
  • Bulleted list indented:
    1. Numbered list one
    2. Numbered list two
    3. Numbered list three
  • Bulleted list four
  • Bulleted list five

Code:

<p>Example 1</p>
<ol>
    <li>Ordered list one</li>
    <li>Ordered list two</li>
    <li>Ordered list indented:
    <ul>
        <li>Indented Bulleted list one</li>
        <li>Indented Bulleted list two</li>
        <li>Indented Bulleted list three</li>
    </ul>
    </li>
    <li>Ordered list four</li>
    <li>Ordered list five</li>
</ol>

Example 2

<ul>
    <li>Bulleted list one</li>
    <li>Bulleted list two</li>
    <li>Bulleted list indented:
    <ol>
        <li>Numbered list one</li>
        <li>Numbered  list two</li>
        <li>Numbered  list three</li>
    </ol>
    </li>
    <li>Bulleted list four</li>
    <li>Bulleted list five</li>
</ul>

Comments

iantresman’s picture

iantresman CreditAttribution: iantresman commented

Also, in the Giordani theme, a number list is indented by a different amount to a bulleted list.

William Haller’s picture

William Haller CreditAttribution: William Haller commented

This same problem also appears in the alagna subtheme of Marinelli.

William Haller’s picture

William Haller CreditAttribution: William Haller commented

The easiest way to get rid of this is to edit the graphics.css file and comment out the lines as follows

/*#primary .singlepage .node .content ul li,*/
.comment ul li{
/*lists in node content*/
list-style:none;
background:url('../img/leaf.gif') no-repeat 0px 2px;
}

/*#primary .singlepage .node .content ol li{ /*ordered lists in node content*/list-style-type:decimal;}*/

That way, the author can specify their own list types as needed. OL's really shouldn't be forced to decimal at the top level in the style sheet. Of course doing this and allowing the normal bullet points from the browser instead of the background url causes its own CSS issues with some browsers, but the only way around it that I know of is to specify all the orders you think you might hit in individual specifications (ol ol ol, ol ol ul, ol ul ol, etcetera). If somebody has a better way, I'd like to hear it.

iantresman’s picture

iantresman CreditAttribution: iantresman commented

This is the fix I made. In sites/all/themes/marinelli/graphics.css in the section /*lists in content*/:

  1. After the css block for #primary .singlepage .node .content ul li I added a new block which fixes nested bulleted lists in ordered numbered lists;
    #primary .singlepage .node .content ol ul li {
list-style:none;
background:url('img/leaf.gif') no-repeat 0px 2px;
padding-left: 20px;
}

  2. To fixed unwanted bullets in numbered lists, I changed
    #primary .singlepage .node .content ol li{ /*ordered lists in node content*/list-style-type:decimal;} to 
    /*ordered lists in node content*/
#primary .singlepage .node .content ol li {list-style-type:decimal;background: none;}
  3. And finally, to ensure that the font size of nested lists was consistent, I added:
    #primary .singlepage .node .content ul ol li,
#primary .singlepage .node .content ul ul li,
#primary .singlepage .node .content ol ol li,
#primary .singlepage .node .content ol ul li {font-size: 100%}

I didn't fix the indented lists not indenting by the same amount.

ghede’s picture

ghede CreditAttribution: ghede commented

@iantresman

Just wanted to say thanks, your solution in #4 fixed things nicely. I now have correctly formatted lists!

Best regards,
Jim

tallsimon’s picture

tallsimon CreditAttribution: tallsimon commented

also in nested lists, the text size of the child items gets bigger the more nested the link. is this also the case on other people's sites? is that what the fix above is for? - {font-size: 100%}

tallsimon’s picture

tallsimon CreditAttribution: tallsimon commented

oh yes, that is much better. maintainer, please roll in to next verson!

oadaeh’s picture

oadaeh CreditAttribution: oadaeh at Flatt and Sons commented
Issue summary: View changes
Status: Active » Closed (won't fix)

This issue is being closed because it is against a branch for a version of Drupal that is no longer supported.
If you feel that this issue is still valid, feel free to re-open and update it (and any possible patch) to work with the 7.x-4.x branch.
Thank you.