Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    <ol><li> with (1) (2) instead of 1. 2. ?

    How do I set up an <ol> to use the format (1) (2) (3) instead of the default 1. 2. 3. ?

    Is there a way to do ((1)) ((2)) ((3)) as well or (a) (b) (c)?

    I'm converting some legal documents to HTML and this would be extremely helpful.

    If it's somethig HTML/CSS can't do, then <del>I will be sad</del> is there an easier way to automatize the conversion of <ol>'s and <li>'s to <p>'s with the (1) format typed out, rather than changing everything by hand?

    Thanks!!

    Sonja
    Last edited by Sonjaaa; 09-28-2006 at 09:31 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope you can only have decimal, roman, or alpha styles.

    May be able to do something with a server side language such as PHP though.

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Or maybe there's a tricky way to put an image over the number to put the parethesis brackets around the number, or I dunno?

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could set the background image of the <li> to some brackets, yup, that could work, but I've only ever experimented with background images for bullets etc on unordered lists with the list style set to none. Not sure if the numbers/background would appear in the correct places...

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Wow, this is a serious shortcoming of CSS. You'd think it would have options to customize many things like this.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I'm sure developers have more concerns than list style types...

    I tested with li { background: url(brackets.png) left no-repeat; } , but it causes the background to be under the content, not the numbers.

  • #7
    New Coder
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    T3h solution for now...

    In the end, the best I could do was keep the <li> format, but use CSS to make the numbers/bullets dissapear in front of each <li> item. And then I typed it in manually at the beginning of each one, e.g.

    <li>(1)&nbsp;Bla bla bla</li>

    Sonja

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Actually CSS does have something similar to what you are talking about but it isn't widely supported among browsers. http://www.w3schools.com/css/pr_gen_...-increment.asp
    You can automate it with JS or any other server side language maybe
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    #list {
    margin:0;
    padding:0;
    list-style:none;
    }
    </style>
    <script type="text/javascript">
    function setNum()
    {
    	var listLi = document.getElementById('list').getElementsByTagName('li');
    	for(var i = 0; i < listLi.length; i++)
    	{
    		var temp = listLi[i].firstChild.nodeValue;
    		listLi[i].firstChild.nodeValue = '(' + i + ') ' + temp;
    	}
    }
    window.onload = setNum;
    </script>
    </head>
    <body>
    <ol id="list">
    <li>Number 1</li>
    <li>Number 2</li>
    <li>Number 3</li>
    <li>Number 4</li>
    <li>Number 5</li>
    </ol>
    </body>
    </html>
    Last edited by _Aerospace_Eng_; 10-02-2006 at 07:43 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    The CSS 2.1 specification's Generated Content, Automatic Numbering, and Lists section explains how you would do this via CSS. The primary problem is that Internet Explorer 6 and 7 RC1 don't support the :before pseudo-element or content property; Firefox, Opera, Konquerer, and Safari have complete or near-complete support for both.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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