This is driving me crazy. I can't seem to get my lists to wrap and indent correctly.

Take a look at this: example . Notice how when the list item wraps to the next line, it doesn't indent enough?

Here is the source of list.htm:

<HTML>
<HEAD>
<LINK href="base.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>

<table>
<tr>
<td>
<DIV class=navBar><BR>
<UL>
<LI>Hello There
<LI>Testing unordered lists
<LI>Here is another list item
</LI>
</UL>
</DIV>
</td>
</tr>
</table>

</BODY>

</HTML>

and here is the css (base.css file):

ul {
list-style-type: disc;
list-style-position: outside;
text-indent: 5px;
margin: 0 0 0.5em 15px;
}

.navBar {
width:100px;
font-family: Verdana, Lucida, helvetica, arial, sans-serif;
font-size:11px;
border-style:solid;

}

Any suggestions at all would be great. It's driving me bonkers.
Thanks.

    text-indent only indents the first line of text. It is intended to use with indenting the first line of a paragraph and such. You can use margin and padding, I think anyway never actually used css on lists, to achieve what you're looking for.

      I've been playing with margin and padding for the past week. All it does is move the whole list in - doesn't format the alignment of the list items.

        Thanks man.
        Unfortunately, it doesn't do what I need. That will just move the whole list item (including the dot) to the right.

          Remove the text-indext from your ul. Then change the pixel length of the margin-left to your desired size.

            Thank you sir!

            You have saved me an early death. I swear this was giving me an ulcer.

            very cool...

              Write a Reply...