www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] list-style-type

  1. #1
    Join Date
    Oct 2005
    Location
    California
    Posts
    603

    resolved [RESOLVED] list-style-type

    I'd like the ordered list to have a list-style-type to look like this:

    1) bla bla
    2) bla bla
    ...

    Something like: list-style-type:paren ... but of course, this doesn't work. Anybody know how to go about this?
    Last edited by sitehatchery; 07-03-2006 at 09:29 AM.

  2. #2
    Join Date
    Jun 2006
    Posts
    263
    ol { list-style-position: outside; }

  3. #3
    Join Date
    Oct 2005
    Location
    California
    Posts
    603
    It's outside by default. What I'm looking for is the ")" after the number and not the "."

  4. #4
    Join Date
    Jun 2006
    Posts
    263
    Sorry, I can't seem to find anything that will set the parentheses.

  5. #5
    Join Date
    Oct 2005
    Location
    California
    Posts
    603
    I wasn't able to find it either. Is there any way to take of the "." after the number?

  6. #6
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    You have to add the markers to the list-item manually or use a server-side language to do it.

    Or in this case because it's stylistic, you could do it with JavaScript and just remember that people using a browser without JavaScript support enabled would see "1." instead of "1)".
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  7. #7
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,334
    Theoretically you could use the :before pseudo-element along with the content and counter properties, but of course IE6 does not support the :before pseudo-element.

    This works fine in Firefox, though:

    CSS:
    Code:
    #parens {
      counter-reset: parens;
      list-style: none;
      padding: 0;
      margin-left: 0;
    }
    #parens li:before {
      content: counter(parens)") ";
      counter-increment: parens;
    }
    HTML:
    HTML Code:
    <ol id="parens">
    <li>Item one</li>
    <li>Item number 2</li>
    <li>Item no. three</li>
    </ol>
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  8. #8
    Join Date
    Oct 2005
    Location
    California
    Posts
    603
    I just showed it manually with breaks.

    1) item 1 <br>
    2) item 2 <br>
    ...

    Not the result I wanted, but oh well.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles