Web Analytics Made Easy - StatCounter CSS and Lists - CodingForum

Announcement

Collapse
No announcement yet.

CSS and Lists

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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; Jun 28, 2002, 12:42 PM.
    Tags: None
  • #2
    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; Jun 28, 2002, 12:53 PM.
    boxer_1
    CodingForum Moderator
    "How did a fool and his money get together in the first place?"

    Comment

    • #3
      <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.
      jasonkarldavis.com

      Comment

      • #4
        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
        CodingForum Moderator
        "How did a fool and his money get together in the first place?"

        Comment

        • #5
          Thanks guys, your suggestions kick started my brain. I ended up going with:

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

          Comment

          Previous template Next
          Working...
          X