Why are my bulleted lists out-dented?

[johnfromberkeley]

hi,

i don't really know anything about css.

i am using a new wordpress template, and my bulleted lists are appearing out-dented. here is the site:

http://hawaii.johnfromberkeley.com/?p=10

can anyone help me modify the css to get them indented?

thanks!

[Paul O'B]

Hi,

The default of a list bullet is outside the principal box and you could use list-style:inside instead.

e.g.

.content_txt ul {
    padding:0; 
    margin:0;
list-style:inside;
}

However that means that when a line of text wraps it will line up under the bullet and not with the text. If this is an issue then instead just add a margin to the list to move the whole thing.

e.g.

.content_txt ul {
    padding:0; 
    margin:0 0 0 14px;
}

[prasanthmj]

All the li (list item) styles have padding 0 on the left side.
Try increasing the left side padding. understanding the css box model will help.

[johnfromberkeley]

hi, paul-

3 questions:

1. how do i combine your recommendations, e.g. have the text inside, and also wrap with the text and not the bullet?

2. how do i have the bullets actually indent?

3. do i replace the existing ".content_txt ul", or add it afterwords.

paul and prasanthmj- i am really coding/css ignorant. i can basically look for patterns and copy-paste, but i have no idea what i am doing, really.

thanks for helping me!

[johnfromberkeley]

never mind!!! i got it! you guys are lifesavers!

[johnfromberkeley]

oops. spoke too soon!

notice that the left side is not lining up with the text, as paul said.

[Paul O'B]

Remove the list-style:inside and increase the margin

Sorry I wasn't clear originally. It was an either or

[guido2004]

Try without list-style-position: inside

[johnfromberkeley]

hi, paul-

when i remove "list-style-position: inside", the list goes flush left. : (

[Paul O'B]

Did you increase the margin left from 14px to something like 30px?

e.g.

.content_txt ul {
    padding:0; 
    margin:0 0 0 30px;
}

[johnfromberkeley]

now ~that~ worked. thanks for all the help!