nested simpleList broken! #87

Open
tomtomsen opened this Issue Jul 22, 2011 · 3 comments

Comments

Projects
None yet
3 participants

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.

Owner

stubbornella commented Jul 27, 2011

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

dmcass commented Aug 12, 2011

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

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 :) !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment