nested simpleList broken!

[tomtomsen]

HTML

Based on blueprint css template:

<ol class="simpleList">
  <li>Ordered list</li>
  <li>Here's a nested unordered list
    <ul class="simpleList">
      <li>Nested Unordered list</li>
      <li>Nested ordered list
        <ol class="simpleList">
          <li>The first</li>
          <li>And the second</li>
        </ol>
      </li>
    </ul>
  </li>
  <li>Ordered List item</li>
  <li>Nested Ordered list
    <ol class="simpleList">
      <li>Some point</li>
      <li>Nested Unordered list
        <ul class="simpleList">
          <li>The first</li>
          <li>And the second</li>
        </ul>
      </li>
    </ol>
  </li>
</ol>

Expected Result

1. Ordered list
2. Here's a nested unordered list
   • Nested Unordered list
   • Nested ordered list
     1. The first
     2. And the second
3. Ordered List item
4. Nested Ordered list
   1. Some point
   2. Nested Unordered list
      • The first
      • And the second

Actual Result

1. Ordered list
2. Here's a nested unordered list
   • Nested Unordered list
   • Nested ordered list
     • The first <<<
     • And the second <<<
3. Ordered List item
4. Nested Ordered list
   1. Some point
   2. Nested Unordered list
      • The first
      • And the second

Reason

content.css - line 18-22

/* numbered list */
ol.simpleList li{list-style-type: decimal; margin-left:40px;}
/* standard list */
ul.simpleList li{list-style-type:disc; margin-left:40px;}

Here ul.simpleList li overrules ol.simpleList li if (like in this case) lists are nested. Both have the same specificity (0012) but ul.simpleList li wins, because of its position.

Solution?

Simple - with a downside

Using the css selector >:

replace: content.css - line 18-22

/* numbered list */
ol.simpleList>li{list-style-type: decimal; margin-left:40px;}
/* standard list */
ul.simpleList>li{list-style-type:disc; margin-left:40px;}

Beware: css selector is not supported by IE6

Use simpleList for list with no list-style-type

replace: content.css - line 18-22

/* numbered list & standard list */
ol.simpleList li,
ul.simpleList li {list-style-type: none; margin-left:40px;}

Now the browser uses the default styling of lists and we would use simpleList to remove enumations.

[stubbornella]

I wonder if we could fix this by moving away from reset.css... Rely more on standard browser defaults for OL and UL.

[dmcass]

Couldn't this problem be solved by letting these styles be declared on the ul and ol instead of the li? Was there a reason that they weren't?

From the W3C CSS2.1 spec:

Another solution would be to specify 'list-style' information only on the list type elements

ol.alpha  { list-style: lower-alpha }
ul        { list-style: disc }

Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.

Solution

.simplelist { padding-left: 40px; }
ol.simplelist { list-style-type: decimal; }
ul.simplelist { list-style-type: disc; }

[tomtomsen]

Just to link both together: http://groups.google.com/group/object-oriented-css/browse_thread/thread/d90a9eb7707c3a71

btw i love dmcass approach. it was so obvious :) !