SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Restart and ordered list at a particular number

    Hi everyone,

    I have an ordered list with half the numbers in one floated div and the other half in another floated div. The first list goes to number 9 so I need to restart the second list at number 10.

    I used <ol start="10"> in the second ol but have read that this is deprecated. Is there a more standards way of doing this that will be backward compatible (at least to early ie browsers)?

    Appreciate any assistance.

  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)
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <style type="text/css">
          html {font:81.25%/1.5 Verdana,sans-serif}
          ol {margin-left:0; padding-left:0}
          ol>li {list-style-type:none; counter-increment:item}
          ol>li:before {display:inline-block; width:2em; margin-right:0.5em; text-align:right; content:counter(item, decimal)}
          #a, #b {float:left; width:20em}
          #a {counter-reset:item 0}
          #b {counter-reset:item 9}
        </style>
      </head>
      <body>
        <div id="a">
          <ol>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <li>Seven</li>
            <li>Eight</li>
            <li>Nine</li>
          </ol>
        </div>
        <div id="b">
          <ol>
            <li>Ten</li>
            <li>Eleven</li>
            <li>Twelve</li>
            <li>Thirteen</li>
            <li>Fourteen</li>
            <li>Fifteen</li>
            <li>Sixteen</li>
            <li>Seventeen</li>
            <li>Eighteen</li>
          </ol>
        </div>
      </body>
    </html>
    This doesn't work in IE7 or older, although it's fairly simple to adapt it with the use of a simple JavaScript.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. You example works well however my items span more than one line so they're not being indented correctly, ie. with a hanging indent. Is there any way to adjust this? Also, how would I fix the backward compatibility issue with javascript? Do you have any tutorials that show how to do this?

  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)
    Here's a revised version.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <style type="text/css">
          html {font:81.25%/1.5 Verdana,sans-serif}
          ol {margin-left:0; padding-left:0}
          ol li {padding-left:2.5em; text-indent:-2.5em; list-style-type:none; counter-increment:item}
          ol li:before {display:inline-block; width:2em; margin-right:0.5em; text-align:right; content:counter(item, decimal)}
          ol li .ie-before {display:inline-block; width:2em; margin-right:0.5em; text-align:right}
          #a, #b {float:left; width:20em}
          #a {counter-reset:item 0}
          #b {counter-reset:item 9}
        </style>
      </head>
      <body>
        <div id="a">
          <ol>
            <li>One<br>Second line</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <li>Seven</li>
            <li>Eight</li>
            <li>Nine</li>
          </ol>
        </div>
        <div id="b">
          <ol>
            <li>Ten<br>and a second line here, too</li>
            <li>Eleven</li>
            <li>Twelve</li>
            <li>Thirteen</li>
            <li>Fourteen</li>
            <li>Fifteen</li>
            <li>Sixteen</li>
            <li>Seventeen</li>
            <li>Eighteen</li>
          </ol>
        </div>
        <!--[if lte IE 7]>
        <script type="text/javascript">
          (function () {
              var addBefore = function (id, start) {
                  var items = document.getElementById(id).getElementsByTagName("li");
                  for (var i = 0, num = start; i < items.length; ++i, ++num) {
                      var span = document.createElement("span");
                      span.className = "ie-before";
                      span.appendChild(document.createTextNode(num + ""));
                      items[i].insertBefore(span, items[i].firstChild);
                  }
              };
              addBefore("a", 1);
              addBefore("b", 10);
           })();
        </script>
        <![endif]-->
      </body>
    </html>
    Birnam wood is come to Dunsinane

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Tommy,
    When using the counter-increment:item; is it possible to reset periods after the decimals as with an unstyled ol.

    Obviously it is the list-style:none that is removing the default ol periods.

    Code:
    ol>li {list-style-type:none; counter-increment:item}
    e.g.

    1. ----- 4. -----
    2. ----- 5. -----
    3. ----- 6. -----

  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)
    Quote Originally Posted by Rayzur View Post
    When using the counter-increment:item; is it possible to reset periods after the decimals as with an unstyled ol.
    Oh, yes! Well, not with counter-increment, but with the content property.
    Code CSS:
    ol li:before {
      ...
      content:counter(item, decimal) ".";
    }

    The content property accepts multiple values, separated by white-space.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the revised code. After number 15 I have a nested ul so that there are 5 bullet points indented on 15 and then it will go back to 16 after that. Currently all the li's of the ul are being rendered as numbers and are included in the count but they're indented. Can you tell me if there's a way to get around this?

    Appreciate any further help.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If I'm understanding you right you just want a nested <ul> to not be indented?

    Just set the padding to 0 (or margin), which ever you set, for hte <ul> or <li> or whichever element has the spacing . I don't know if you are using Tommys full code however
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I've adapted Tommy's code so it works with my two columns as follows:

    Code:
    div.terms ol {
    margin-left: 0;
    padding-left: 0;
    }
    
    
    div.terms ol li {
    padding-left: 2.5em;
    text-indent: -2.5em;
    list-style-type:none;
    counter-increment:item;
    }
    
    div.terms ol li:before {
    display:inline-block;
    width:2em;
    margin-right:0.5em;
    text-align: right;
    content:counter(item, decimal)
    }
    
    div.terms ol li .ie-before {
    display: inline-block; 
    width: 2em; 
    margin-right: 0.5em; 
    text-align: right;
    }
    
    
    div.terms div#col1 {
    counter-reset:item 0;
    }
    
    div.terms div#col2 {
    counter-reset:item 9;
    }
    The thing is that the ul's aren't coming out as bullets. Instead they're coming out as numbers, ie. part of the consecutive list, so where a bullet should be after 15, there's now an indented 16.

    Would I need to set some alternate rules for the ul to fix this?

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well I don't know the HTML but I'm assuming it's just a nested list inside of a <ol>

    It will keep counting up so you'd need to reset the counter. I don't work much with counters at all.

    I assume you can just target the ol inside the <ol>.

    Sorry I can't give more, this is shady area for me unfortunately .

    Code:
    div.terms ol ol{/*reset it here or set it as bullets via list-style*/
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just going by my eyeball scan, you need to use the child selector ol > li, since the ul list items fit the bill as descendents of ol.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  12. #12
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following makes it start from 1 again at number 16 but this again isn't what I want since where 16 currently is, this needs to be a bullet. Then after the bullets finish it needs to continue on from 15.

    div.terms div#col2 ol ul {
    list-type: disc;
    counter-reset:item 0;
    }

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hmm try and read [url=http://www.w3.org/TR/CSS2/generate.html#counters]section 12.4.1 of the spec. It seems to be exactly your situation..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gwh View Post
    Thanks for the revised code. After number 15 I have a nested ul so that there are 5 bullet points indented on 15 and then it will go back to 16 after that. Currently all the li's of the ul are being rendered as numbers and are included in the count but they're indented. Can you tell me if there's a way to get around this?

    Appreciate any further help.
    Hi,
    Building on Tommy's code these resets seem to work for the sub ul.
    Code:
          /*=== Sub List Styles ===*/
          ol li ul li {
          list-style:disc;
          margin-left:-2em;/*reclaim li:before space*/
          padding-left:0;
          text-indent:0;
          counter-increment:none;
          }
          ol li ul li:before,
          ol li ul li .ie-before {
          display:none;
    I'm afraid I don't know how to adjust the js for <IE7 though
    Maybe Tommy can do that if he passes through here again.

    Here is the complete code I was testing with

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Multi-Column Ordered List with Counter-Reset</title>
        <style type="text/css">
          html {font:81.25%/1.5 Verdana,sans-serif;}
          ol {margin-left:0; padding-left:0;}
          ol li {
          padding-left:2.5em;
          text-indent:-2.5em;
          list-style-type:none;
          counter-increment:item;
          }
          ol li:before {
          display:inline-block; 
          width:2em;
          margin-right:0.5em;
          text-align:right;
          content:counter(item, decimal) ".";
          }
          ol li .ie-before {
          display:inline-block;
          width:2em;
          margin-right:0.5em;
          text-align:right;
          }
          /*=== Sub List Styles ===*/
          ol li ul li {
          list-style:disc;
          margin-left:-2em;/*reclaim li:before space*/
          padding-left:0;
          text-indent:0;
          counter-increment:none;
          }
          ol li ul li:before,
          ol li ul li .ie-before {
          display:none;
          }
          #a, #b, #c {float:left; width:20em;}
          #a {counter-reset:item 0; background:#DDF}
          #b {counter-reset:item 10; background:#CCF}
          #c {counter-reset:item 20; background:#CDF}
        </style>
      </head>
      <body>
      <h2>Multi-Column Ordered List with Counter-Reset</h2>
        <div id="a">
          <ol>
            <li>One<br>with wrapping text</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <li>Seven</li>
            <li>Eight</li>
            <li>Nine</li>
            <li>Ten</li>
          </ol>
        </div>
        <div id="b">
          <ol>
            <li>Eleven<br>with wrapping text</li>
            <li>Twelve</li>
            <li>Thirteen</li>
            <li>Fourteen</li>
            <li>Fifteen
               <ul>
                  <li>subitem-1</li>
                  <li>subitem-2</li>
                  <li>subitem-3</li>
                  <li>subitem-4</li>
               </ul>        
            </li>
            <li>Sixteen</li>
            <li>Seventeen</li>
            <li>Eighteen</li>
            <li>Nineteen</li>
            <li>Twenty</li>
          </ol>
        </div>
        <div id="c">
          <ol>
            <li>Twenty-One<br>with wrapping text</li>
            <li>Twenty-Two</li>
            <li>Twenty-Three</li>
            <li>Twenty-Four</li>
            <li>Twenty-Five</li>
            <li>Twenty-Six</li>
            <li>Twenty-Seven</li>
            <li>Twenty-Eight</li>
            <li>Twenty-Nine</li>
            <li>Thirty</li>
          </ol>
        </div>    
        <!--[if lte IE 7]>
        <script type="text/javascript">
          (function () {
              var addBefore = function (id, start) {
                  var items = document.getElementById(id).getElementsByTagName("li");
                  for (var i = 0, num = start; i < items.length; ++i, ++num) {
                      var span = document.createElement("span");
                      span.className = "ie-before";
                      span.appendChild(document.createTextNode(num + "."));
                      items[i].insertBefore(span, items[i].firstChild);
                  }
              };
              addBefore("a", 1);
              addBefore("b", 11);
              addBefore("c", 21);
           })();
        </script>
        <![endif]-->
      </body>
    </html>

  15. #15
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for this revised code. I was having trouble with the link given in an earlier post so that's great. I noticed that instead of having a margin-left of -2em as you had it in your original code, I had to change it to -0.5em to make it work:

    div.terms ol li ul li {
    list-style:disc;
    margin-left: -0.5em;/*reclaim li:before space*/
    padding-left: 0;
    text-indent: 0;
    counter-increment:none;

    Would also be great if I could get the code to adjust the js for ie 6 and below. As you say maybe Tommy will pass through again.

    Thanks again.

  16. #16
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just as a postscript on this topic - I've just tested in ie 6, 7 and 8. The code works in 6 and 8 but for some reason version 7 won't render it. Maybe it's a javascript thing.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It seems to be working in my ie7 (on IE tester) and IE8 in IE7 browser mode.

    Quote Originally Posted by Ray
    I'm afraid I don't know how to adjust the js for <IE7 though
    Maybe Tommy can do that if he passes through here again.
    This is probably the wrong way to do it and Tommy will tell me off but couldn't the increment be reduced only if the parent is a ul.
    Code:
    <!--[if lte IE 7]>
        <script type="text/javascript">
          (function () {
              var addBefore = function (id, start) {
                  var items = document.getElementById(id).getElementsByTagName("li");
                  for (var i = 0, num = start; i < items.length; ++i, ++num) {
                      if (items[i].parentNode.tagName =="UL") {--num}
                                        var span = document.createElement("span");
                      span.className = "ie-before";
                      span.appendChild(document.createTextNode(num + "."));
                      items[i].insertBefore(span, items[i].firstChild);
                                }
              };
              addBefore("a", 1);
              addBefore("b", 11);
              addBefore("c", 21);
           })();
        </script>
        <![endif]-->
    Seems to work for that structure.

  18. #18
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I just tested again in ie7 and it does work (not sure what happened before). I didn't revise the javascript since the first code block was given so since it all works in the three ie browsers maybe a revision isn't needed?

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a revised version that handles nested unordered lists.
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <style type="text/css">
          html {font:81.25%/1.5 Verdana,sans-serif}
          ol {margin-left:0; padding-left:0}
          ol li {padding-left:2.5em; text-indent:-2.5em; list-style-type:none}
          ol>li {counter-increment:item}
          ol>li:before {display:inline-block; width:2em; margin-right:0.5em; text-align:right; content:counter(item, decimal)}
          ol li .ie-before {display:inline-block; width:2em; margin-right:0.5em; text-align:right}
          #a, #b {float:left; width:20em}
          #a {counter-reset:item 0}
          #b {counter-reset:item 9}
        </style>
      </head>
      <body>
        <div id="a">
          <ol>
            <li>One<br>Second line</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <li>Seven</li>
            <li>Eight</li>
            <li>Nine</li>
          </ol>
        </div>
        <div id="b">
          <ol>
            <li>Ten<br>and a second line here, too</li>
            <li>Eleven</li>
            <li>Twelve</li>
            <li>Thirteen</li>
            <li>Fourteen</li>
            <li>Fifteen
              <ul>
                <li>Alpha</li>
                <li>Beta</li>
                <li>Gamma</li>
                <li>Delta</li>
                <li>Epsilon</li>
              </ul>
            </li>
            <li>Sixteen</li>
            <li>Seventeen</li>
            <li>Eighteen</li>
          </ol>
        </div>
        <!--[if lte IE 7]>
        <script type="text/javascript">
          (function () {
              var addBefore = function (id, start) {
                  var list = document.getElementById(id).getElementsByTagName("ol")[0];
                  for (var li = list.firstChild, num = start; li != null; li = li.nextSibling, ++num) {
                      var span = document.createElement("span");
                      span.className = "ie-before";
                      span.appendChild(document.createTextNode(num + ""));
                      li.insertBefore(span, li.firstChild);
                  }
              };
              addBefore("a", 1);
              addBefore("b", 10);
           })();
        </script>
        <![endif]-->
      </body>
    </html>
    Birnam wood is come to Dunsinane

  20. #20
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hey Tommy,
    Thanks for posting that revised version, it works very well for IE7 now.

    I know that gwh & Paul said that they were not having problems with IE7 but I never could get it to work right without the script adjustments.

  21. #21
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No I actually didn't end up getting it right in ie7 either until I used Tommy's revised code. I did however have to add one more rule:

    div.terms ol li ul li {
    list-style:disc;
    margin-left: -0.5em;
    padding-left: 0;
    text-indent: 0;
    counter-increment:none;
    }

    This was so that the bullets would render.

    Thanks for the code Tommy.

  22. #22
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I saw that you wanted the bullets for the nested unordered list, but only after I posted my revision. But you had already sorted that problem out yourself.
    Birnam wood is come to Dunsinane


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
  •