SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list-style-position inside vs. outside

    I'm having a problem getting ordered lists to style the way I'd like.

    I want the bullet or number to be outside the list itself, which would imply use of

    ul li, ol li {
    list-style-position: outside;
    }

    which I believe is the default.

    However, then the distance from the left edge is determined by where the text is, not where the bullet or number is. If I want the distance to be set by where the bullet or number (which might be Roman) is, then I have to choose:

    ul li, ol li {
    list-style-position: inside;
    }

    but then, the bullets or numbers become part of the list item text, and I don't want that either.

    What I want is to align the left of the list based on the number or bullet, as in "list-style-position: inside" but align the list item text as in "list-style-position: outside".

    I think I have the solution for bullets:

    ul li {
    list-style-position: inside;
    text-indent: -1em;
    margin-left: 1em;
    }

    but it does not work for ordered lists.

    Here's what I have for ordered lists (list-style-position: outside is a default):

    ol li {
    margin-left: 2em;
    }

    but that only gives the desired result if there are 10 to 99 items in the list and I am using Arabic numerals.

    Actually, it's not the desired result as the numerals are decimal-aligned and I'd like them left-aligned, so there is an even left edge.

    Is this even possible?

    I read the AListApart article on taming lists and it doesn't seem to address ordered lists.

  2. #2
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Code:
    ol{
    	margin:1em;
    	list-style-position:outside;
    	list-style-image:url('bullet.gif');
    }
    edit: sorry for jumping in like this. Back to the drawing board...
    Last edited by tenfingers; Oct 22, 2004 at 17:40. Reason: Was too quick to jump on this one

  3. #3
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a 'dilly of a pickle,' Charles. Like yourself, I've tried everything and nothing seems to work. The problem is really amplified when you use lower-roman on a very long list.

    Something that really confuses the heck out of me is that if a width is applied to the li, the sequencing stops, and every number is a 1. Bet you've seen this already, too, eh?

    Quite the way to spend a Friday night!

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tenfingers
    ...Something that really confuses the heck out of me is that if a width is applied to the li, the sequencing stops, and every number is a 1. Bet you've seen this already, too, eh?
    I hadn't tried that, but your experience will at least keep me from wasting time trying it

    I guess this is one of those CSS missing features we will have to live with.

  5. #5
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually tried about a hundred variations with no success. Was rather hoping someone might come up with a fix. Perhaps we'll have to wait for CSS4

    It'd make a good blog topic if someone finds a fix or hack for this one.


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
  •