UL/LI has no indent when wrapping around floated DIV

**funkdaddu** · 09-20-2005, 05:21 PM

My problem is in IE6 when I float a DIV to the left of copy that has a UL in it, the bullets of the UL are flush against the edge of the DIV and are not indenting like normal. I've tried adding margins and padding to no avail. anyone have any insight? Thanks.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
#layer1    {
	visibility: visible;
	margin-right: 10px;
	position: relative;
	width: 142px;
	height: 300px;
	float: left;
	border: solid 1px #d0d9e1
	}

--></style>
	</head>

	<body bgcolor="#ffffff">
		<div id="layer1">Left Nav Float</div>
		<p>80 days around the world, we'll find a pot of gold just sitting where the rainbow's ending. Time - we'll fight against the time, and we'll fly on the white wings of the wind. 80 days around the world, no we won't say a word before the ship is really back. Round, round, all around the world. Round, all around the world. Round, all around the world. Round, all around the world.</p>
		<ul>
			<li>One for all and all for one, Muskehounds are always ready.
			<li>One for all and all for one, helping everybody. One for all and all for one, it's a pretty story
			<li>Sharing everything with fun, that's the way to be. 
			<li>One for all and all for one, Muskehounds are always ready.
		</ul>
		<p>Knight Rider, a shadowy fight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.</p>
	</body>

</html>

**ibbo** · 09-21-2005, 08:47 AM

you can overide them in your css file.

li{ margin-left:15px; }

Ibbo

**funkdaddu** · 11:41 AM

As I said in my post, I tried that and it doesn't seem to do anything. I put in:

HTML Code:

ul, li {
	margin-left: 25px;
	padding-left: 25px
}

And it still looks the same.

EDIT: I fixed it, this seems to work:

HTML Code:

ul {
	list-style-position: inside
}

**gringo** · 09-21-2005, 11:46 AM

You could also use text-indent

**funkdaddu** · 09-21-2005, 12:31 PM

...of course "list-style-position: inside" makes the bullets wrap around with the second line not indenting. I changed some code and somehow I got it to work with my real site code but not my example... so I'll stick with that. Thanks.