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 5 of 5

Thread: CSS and Lists

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post

    CSS and Lists

    In the follwing code my list creeps into the table, how can I avoid this?

    <html>
    <head>
    <title>Untitled</title>
    </head>

    <body>
    <table style="float:left; border:1px solid black"><tr><td style="text-align:center"><img src="pic1.gif" width="110" height="110"><br />description</td></tr></table>

    <b>This is my list</b>
    <ol>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li><br>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    </ol>
    </body>
    </html>
    Last edited by JohnKrutsch; 06-28-2002 at 05:42 PM.

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    573
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Give this a try and see if it does the trick. There are CSS options as well, but this this is a simple solution to try first:

    <html>
    <head>
    <title>Untitled</title>
    </head>

    <body>
    <table style="left; border:1px solid black"><tr><td style="text-align:center"><img src="spacer.gif" border="1" width="110" height="110"></br />description</td></tr></table>
    <br clear="all">
    <b>This is my list</b>
    <ol>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li><br>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    </ol>
    </body>
    </html>

    Good luck .

    Edit: You'll have to change your image back, I changed it to 'spacer.gif' with a border of '1' for testing .
    Last edited by boxer_1; 06-28-2002 at 05:53 PM.
    boxer_1
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    <style type="text/css">
    li {
    list-style-position: inside;
    }
    </style>

    That seems to fix it in IE6 and Mozilla 1.1.

    The default value is outside... and is rendered outside of the li element. Since your table (block-level) is floating on the left, I'd assume that's the cause of the initial problem.

  • #4
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    573
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    <style type="text/css">
    li {
    list-style-position: inside;
    }
    </style>

    That seems to fix it in IE6 and Mozilla 1.1.

    The default value is outside... and is rendered outside of the li element. Since your table (block-level) is floating on the left, I'd assume that's the cause of the initial problem.
    Speaking of CSS solutions, there's one now.... Here's another just to give you a few more options:

    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    <table style="left; border:1px solid black"><tr><td style="text-align:center"><img src="spacer.gif" border="1" width="110" height="110"></br />description</td></tr></table>
    <b>This is my list</b>
    <ol style="margin:10; padding: 10;">
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li><br>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    <li>Eat this</li>
    <li>Eat this too</li>
    </ol>
    </body>
    </html>

    You can change the values in the example to suit yourself .
    boxer_1
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks guys, your suggestions kick started my brain. I ended up going with:

    <table style="float:left; border:1px solid black; margin-right: 2em">


  •  

    Posting Permissions

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