Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

nested simpleList broken! #87

Open
tomtomsen opened this Issue · 3 comments

3 participants

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

@tomtomsen tomtomsen referenced this issue from a commit in tomtomsen/oocss
@tomtomsen tomtomsen Issuer #87: nested simpleList broken! 9dda5fc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.