CSS and List Item Wrap

[kedrys]

Greetings,

I'm a complete newbie with CSS, and I'm trying to pick up as much as I can. Right now I'm working with a list (not links, just text), and some of the longer list items wrap, but they wrap to the left of the bullet. Is there a way to make the second line automatically indent regardless of where the text wraps, so the second line lines up with the first?

Thanks in advance for your help.

[SuzyUK]

Hi kedrys - Welcome to WebmasterWorld

the list items should wrap in alignment that is second line should align with first by default..

have you already applied any CSS to this list?

Suzy

[kedrys]

Hi SuzyUK, and thanks for the prompt reply.

Yes, I have applied styles to the list, but frankly, I'm not too sure what I'm doing. This is what I have so far:

.featurelist {
font-family: Arial, Helvetica, sans-serif;
font-size: 7pt;
color: #333333;
list-style-position: inside;
list-style-type: disc;
margin-left: 5px;
padding-left: 5px;
text-indent: 10px;
text-align: left;
line-height: 10pt;
height: 100%;
}

for the paragraphs that have the lists, and

#featurelist li
{
padding-left: 10px;
background-image: url(sitegraphics/bullet.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
margin-left: 15px;
}

for the list items themselves.

The table cell container (it's my first try, so I'm still doing mix and match) has the following style assigned to it:

.feature {
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
}

I realize that the text is wrapping normally, as any list item I've ever seen does, but I'm trying to indent the second line of text so that the bullet stands out.

Any suggestions? I'm sure there's a better way to do what I'm trying to do. Thanks in advance.

[encyclo]

list-style-position: [b]inside[/b];

On this particular line, you are specifying that the bullet should be within the area covered by the list, so the behaviour you are seeing is normal. You need to change this to

outside

to have the effect you want. You are also definig a text-indent of 10 pixels which will only operate on the first line: you should remove that and use padding or margin as appropriate.

Without seeing your corresponding HTML markup, it's difficult to be more precise than that: you are define "featurelist" as a class in one instance and an ID in the other, which may well be causing you problems too. (A class is defined with a period, an ID with a # sign).

[kedrys]

Hi Encyclo,

Thanks for catching my unintentional reuse of featurelist as both a class and an ID. Thanks to your advice, I think I have everything working now. Hope I can learn enough about CSS to turn it around and help someone else someday! :)