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 10 of 10
  1. #1
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts

    Question list-style-type alternatives?

    Hi,

    Two Questions:

    1 (this is more important):

    How do I continue list numbering (or lettering) from one list to another?

    E.g.

    Code:
    <ol>
      <li>Monday
      <li>Tuesday
      <li>Wednesday
    </ol>
    
    <p>Rhubarb, rhubarb, rhubarb</p>
    
    <ol> <!-- I would like this to continue numbering at "4" rather than reverting to "1". -->
      <li>Thursday
      <li>Friday
      <li>Saturday
      <li>Sunday
    </ol>


    2:
    If you specify list-style-type:lower-alpha;, your bullets look like:

    a. Banana
    b. Colobus
    c. Howler
    d. Macaque

    What I would like is:

    (a) Banana
    (b) Colobus
    (c) Howler
    (d) Macaque

    Is there a way of doing this with CSS list style specifiers?

    If the simple answer is "no", then I can live with that restriction!

    Incidentally, I have tried using the examples given in the CSS2 specification (http://www.w3.org/TR/REC-CSS2/generate.html#markers) - but they don't work! Even when I do a direct cut-and-paste of the example into an HTML document! This is really irritating because the examples show exactly what I am trying to do. I am using IE version 6.

    TIA,
    Mike.
    Last edited by mlse; 08-09-2005 at 05:55 PM.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1. You can use a 'start' attribute to specify where to start counting at. I don't know if/think there is a CSS option.

    eg.

    <ol start="4">

    2. I believe you can use the 'content:before' and 'after' properties, although I haven't played with it much so can't really help you too much.

    eg.

    li:before {content: "("}
    li:after {content: ")"}

    Try it and let me know how it goes... but thinking about it, the 'after' one probably places it at the end of the list, and the before one may place it after the 'a.' !

  • #3
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Yep, I tried that, doesn't work! (see my additional comments on my original post). Perhaps I'm doing something wrong somewhere ... !
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yup strange doesn't work in FF or IE...

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    You should know that IE6 does not have a complete CSS implementation (far from it!), and in particular does not support :before and :after. But it will work in newer browsers such as Mozilla and Firefox.

    IE7 is in beta right now, and will supposedly add support for the more commonly used CSS elements, hopefully including :before.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should know that IE6 does not have a complete CSS implementation
    I though that would be the case, didn't work in FF though.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hmmm...Might be the symbols you were trying to use. Admittedly, I don't know enough about using :before with FireFox, but I was able to use a single symbol for fancy list bullets on my website. Don't know about this case, though.

  • #8
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    I had a feeling it might be something to do with unsupported stuff!

    Well, at least I can do it in PHP instead!

    Mike.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #9
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Done it in PHP!

    It's as ugly as sin (the code, that is, not the auto-generated HTML! - the word "hack" springs to mind ...) - but it works!
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #10
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    There are always CSS Generated Counters, but they don't work in IE.

    Code:
    ol {
    list-style-type: none;
    }
    
    ol li:before {
    content: "(" content: counter(ol, lower-alpha) ") ";
    counter-increasement: ol 1;
    }
    Edit: I didn't see the last part of your first post. So, ignore this.
    Last edited by Kurashu; 08-11-2005 at 11:54 PM.


  •  

    Posting Permissions

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