PDA

View Full Version : CSS and Lists

JohnKrutsch
06-28-2002, 05:34 PM
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>
boxer_1
06-28-2002, 05:50 PM
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 ;).
jkd
06-28-2002, 05:50 PM
<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. :)
boxer_1
06-28-2002, 05:58 PM
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...:D. 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 ;).
JohnKrutsch
06-28-2002, 06:15 PM
Thanks guys, your suggestions kick started my brain. I ended up going with:

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