how to prevent bulleted list from being indented 1

[tnsbuff]

Hi,

I've tried setting the text-indent and margins for the <ul> and <li>. Is there a way to prevent a bulleted list from being indented? I just want it to line up with the paragraph above it (not indented).

Thanks for any suggestions!

 

[BillyRayPreachersSon]

Have you tried this:

ul, li {
   padding: 0px;
   margin: 0px;
   left: 0px;
}

Haven't tried it, but worth a go.

Hope this helps,
Dan

 

[tnsbuff]

Hi,

Yeah, I tried that and it removes the bullets.

I played around and came up with this and it seems to work ok, although I'm not sure how stable or cross-browser compatible it is:

ul, li {
padding: 3px;
margin: 5px;
}

Thanks!

 

[tnsbuff]

It seems strange, doesn't it, that the bullets would disappear from the page using 0 margin, etc.

The only thing I can figure is that the margin and padding apply to the text of the list item, not the bullets, thus forcing the bullets off the page.

 

[Vragabond]

The following displays the same (and exactly what you wanted) in Mozilla 1.5, IE 6 and Opera 7.23:

<style type="text/css">
ul {
	padding-left: 0px;
	margin-left: 0px;
}

li {
	list-style-position: inside;
}
</style>
<ul>
 <li>Option 1</li>
 <li>Option 2</li>
 <li>Option 3</li>
</ul>

 

[BillyRayPreachersSon]

Ooh nice CSS, Vragabond...

Now I *definately* need to update my first edition O'Reilly book ;o)

Dan

 

[Foamcow]

I have found that sometimes the bullets will still show up outside the list.

Setting the bullets to display inside is a solution providing that your list items do not span more than 1 line (I think).

I recently did this to get around the problem. Works in recent/latest version of
Windows:
IE6, Opera, Mozilla, Netscape
Mac:
Safari, Explorer, Opera

Here's the code (the margin stuff was buttering for the layout I was doing).
The critical line is bold.

ul {
	margin:0 0 10px 0;
	padding: 0;
	[b]list-style: none;[/b]
}	  

ul li {
	margin:5px 0;
}

See it in action here:

http://www.foamcow.com/unreachable/index.php

The navigation menus are lists.