SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Inline Ordered List with Numbers or Letters?

    I'm working on a legal document with several lettered sections (e.g., "Party of the first part shall a. do stuff, b. do more stuff, c. not do that, and d. wash my car"). Using an ordered list seems like the correct approach for this, but I cannot seem to get these letter counters to appear.

    My markup looks like this:

    Code:
      <dl>
    
          <dt>Section Title</dt>
     
          <dd>Party of the first part shall
       
             <ol>
    
                 <li>do stuff, </li>
                 <li>do more stuff, </li>
                 <li>not do that, and </li>
                 <li>wash my car.</li>
    
              </ol>
    
          </dd>
    
      </dl>
    ...with my CSS for the ordered list is currently:

    Code:
    dd ol {list-style-type:lower-alpha;}
    ol,ol li {float:left}
    This displays the items inline just fine, but no letters. I've tried display:inline instead of float:left, but then I lose the display:list-item property (so no numbers or letters), changing the margins, padding, the list-style-position, and a few other things, but with no success.

    Ugh. What I am missing here? Sorry, I know it's something blindingly obvious, but I'm just too tired or stupid to see it...

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, only boxes with display:list-item will display list markers, and those are by nature block-level boxes.

    You can use counters and generated content for this, but that won't be supported in IE7 and older.

    Code CSS:
    ol {
      display:inline;
      margin:0;
      padding:0;
      counter-reset:item;
    }
     
    li {
      display:inline;
      margin:0;
      padding:0;
      counter-increment:item;
    }
     
    li:before {
      content:counter(item, lower-alpha) ".";
    }

    You can do it with floats as well, but I don't know how to get it to work in IE. You'll need to wrap the text before the OL in an element, and float that too:
    Code HTML4Strict:
    <dl>
      <dt>Section Title</dt>
      <dd><p>Party of the first part shall</p>
        <ol>
          <li>do stuff, </li>
          <li>do more stuff, </li>
          <li>not do that, and </li>
          <li>wash my car.</li>
        </ol>
      </dd>
    </dl>
    Code CSS:
    dd ol {
      list-style-type:lower-alpha;
    }
     
    dd p, ol, ol li {
      float:left;
      margin:0;
      padding:0;
    }
     
    li {
      margin-left:1.5em;
    }
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the fast turnaround! The first approach works, and another plus is that I can use a right paren for the letter (e.g., "a) do stuff") instead of a period...I like it. I'll handle IE6 / 7 with a separate stylesheet for now.

    One hitch, however...for some reason, the ordered list itself is not displaying inline with my copy when I use this technique...peculiarity here or is that something you see as well?

    Code:
      <dd>Company X reserves the right to block or remove communications or materials that it determines to be 
      
        <ol class="inl">
          <li>abusive, defamatory, or obscene, </li>
          <li>fraudulent, deceptive, or misleading, </li>
          <li>in violation of a copyright, trademark or; other intellectual property right of another or </li>
          <li>offensive or otherwise unacceptable to Company X in its sole discretion.</li>
        </ol>
      </dd>
    Thanks again!
    Last edited by kid_koala; Mar 10, 2009 at 07:14.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need display:inline for ol.inl, and also set its margins and padding to zero to remove any browser defaults.

    For IE you can emulate the generated content via JavaScript.
    Code JavaScript:
    var counter = (new String("a")).charCodeAt(0);
    var items = document.getElementsByTagName("li");
    for (var i = 0, n = items.length; i < n; ++i) {
        items[i].firstChild.insertData(0, String.fromCharCode(counter++) + ") ");
    }
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, your code worked perfectly. It was just exhaustion on my part...still had an upstream "float:right" hanging around from an earlier attempt.

    Took that out and everything is now cool. Amazing what a couple of hours of sleep can do. I'll add in your IE javascript fix now.

    Incidentally, your writings on CSS here and on your website have helped me tremendously over the past couple of years. Thank you for all of the information, you rock!

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!
    Birnam wood is come to Dunsinane

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You'll need to wrap the text before the OL in an element, and float that too:
    Why did that need to be floated? Or did the OP need the ol next to the dd text and I missed that?

    Just so happens that I'm building the same thing, 9 pages of it (ug) using also ol and dl...

    ...and I seem to remember from the last one I built, that lower alpha didn't show at all in IE, floats or not. All other types I used seemed ok, but a. b. c. never showed in IE.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Why did that need to be floated? Or did the OP need the ol next to the dd text and I missed that?
    Yeah. It should all go in a single line. Without floating the DD text, the list would appear before it since the items were floated. (In Firefox and IE the list might have dropped to the line below, since they are buggy when it comes to floats appearing in existing line boxes, but I didn't check.)
    Birnam wood is come to Dunsinane

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah, thx.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •