SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list-style-type and flush lists over multiple lines

    hi,

    is there anyway to create a list with a fixed width and keep it flush on the left side? like right now it'll display:

    01. test test test test
    test test test set


    instead, id like it to display:

    01. test test test test
    test test test test


    i use list-style-type: decimal-leading-zero

    edit whoops that didnt come out right, i just want the content of the list to line up.. so that the second, third, fourth, etc lines are indented as well.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For this you have to use list-style-position: outside (which is the default). However, IE & FF render the offset in different ways - IE uses left margin while FF uses left padding, so if the <ol> has a width then IE will not display the numbers as they are hidden outside the <ol> on the left. Trick here is to zero the margins on the <ol> and apply a left padding sufficient to bring the list numbers into view within <ol> :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    ol {
    	width: 100px;
    	padding: 0 0 0 3em;
    	margin: 0;
    }
    li {
    	list-style-type: decimal-leading-zero;
    	list-style-position: outside;
    }
    -->
    </style>
    </head>
    
    <body>
    <ol id="test">
    	<li>test test test test test test test test</li>
    	<li>test test test test test test test test</li>
    	<li>test test test test test test test test</li>
    </ol>
    </body>
    </html>


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
  •