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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Location
    Northern California
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Ordered Lists

    What I am trying to acomplish is to change the font size and color of the numbers for an OL. And the <li> to have a different font and size. I am testing on PC, FF and IE6. On Mac Safari and FF. FF and IE show a bigger gap between the last two lines. I wanted to know if there is a way to get rid of that gap.

    Here's the CSS

    ol#numbered{
    color: rgb(153, 153, 153);
    display: block;
    font-family: Arial;
    font-size: 20px;
    list-style-position: outside;
    list-style-type: decimal;
    padding-left: 50px;
    width: auto;
    }
    .list{
    font-size: 12px;
    color: #4b4d44;
    line-height: 18px;
    }


    And now the HTML

    <ol id="numbered">
    <li><span class="list">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tincidunt posuere dui. Aenean tristique magna sed mi. In hac habitasse platea dictumst. Sed turpis neque, elementum sed, blandit id, posuere quis, neque. Morbi volutpat sollicitudin ipsum. Quisque ullamcorper, libero eu luctus sodales, risus neque interdum massa,</span></li>
    <li><span class="list">perdiet. Donec pulvinar tellus. Cras rhoncus tristique tortor. Integer lectus orci, convallis feugiat, ullamcorper eu, scelerisque nec, nisl. Vestibulum suscipit, lacus vel cursus adipiscing, odio dolor tincidunt est, quis tempor magna arcu ut libero. </span></li>
    <li> <span class="list">i. Nullam fermentum. Ut augue risus, iaculis vel, tincidunt ut, volutpat vitae, lacus. Nullam aliquam, turpis at mollis volutpat, tellus eros rutrum lorem, sit amet elementum diam mauris vitae metus. Cras eleifend dignissim sapien. Vestibulum eros nisi, venena </span></li>

    <li><span class="list">Ut eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id purus. Cras in elit. Maecenas ac lacus quis orci consectetuer suscipit. Ut porta lacus eu enim. Ut euismod felis id ligula. Phasellus est augue, hendrerit sodales, euismod.</span> </li>
    </ol>

  • #2
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    maybe instead of using an auto-width, try an approximate ammount

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jojobeth1,
    I thought maybe adding *{margin:0;padding:0;} to your CSS would stop the extra space but it didn't. It looks like it's your use of span tags that do it though, if you put the class directly on the li the space doesn't happen.
    Like this:
    Code:
    <ol id="numbered">
    <li class="list">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tincidunt posuere dui. Aenean tristique magna sed mi. In hac habitasse platea dictumst. Sed turpis neque, elementum sed, blandit id, posuere quis, neque. Morbi volutpat sollicitudin ipsum. Quisque ullamcorper, libero eu luctus sodales, risus neque interdum massa,</li><li><span class="list">perdiet. Donec pulvinar tellus. Cras rhoncus tristique tortor. Integer lectus orci, convallis feugiat, ullamcorper eu, scelerisque nec, nisl. Vestibulum suscipit, lacus vel cursus adipiscing, odio dolor tincidunt est, quis tempor magna arcu ut libero. </span></li>
    <li> <span class="list">i. Nullam fermentum. Ut augue risus, iaculis vel, tincidunt ut, volutpat vitae, lacus. Nullam aliquam, turpis at mollis volutpat, tellus eros rutrum lorem, sit amet elementum diam mauris vitae metus. Cras eleifend dignissim sapien. Vestibulum eros nisi, venena </span></li>
    
    <li><span class="list">Ut eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id purus. Cras in elit. Maecenas ac lacus quis orci consectetuer suscipit. Ut porta lacus eu enim. Ut euismod felis id ligula. Phasellus est augue, hendrerit sodales, euismod.</span> </li>
    </ol>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I think it's because the browser automatically took a line height from the preceeding font-size--therefore the li itself is ~30px high.

    You shouldn't bother with the spans anyway--just use the selector #numbered li.


  •  

    Posting Permissions

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