Forum Moderators: not2easy

Message Too Old, No Replies

Custom Indent for Lists

         

sneaks

12:56 pm on Jun 22, 2005 (gmt 0)

10+ Year Member



I would like to make the indent space for an unordered list slightly less than it is... is this a browser thing or can it be done using CSS?

once thanks!
snx

zackattack

1:20 pm on Jun 22, 2005 (gmt 0)

10+ Year Member



Hi Sneaks

Yes, it can be done in CSS - and is nice and easy

ul {
margin: 0;
padding: 0 0 0 0; /* set value to desired size */
}

You need to attach styles to your ul, there are several ways to do this. Let me know if you want to find out how. I could have put all the info up but not sure if that is what you wanted

ZA

createErrorMsg

2:40 pm on Jun 22, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



slightly less than it is

Different browsers use different properties to create the space for the marker box (where the bullet appears) in lists. To get cross-browser reliability, you need to start with what zackattack suggests: zeroing out the margins and padding.

ol,ul,li{margin:0;padding:0;}

Following this, you can add in whatever values you want. Which element you add values to will depend on what exactly you mean by the "indent" in the list.

If by indent you mean the space to the left of the bullets, you'll want to add a left margin. This can be applied to either the UL/OL or the LI element(s).

If by indent you mean the space between the bullet and the text in the list-item, you'll want to add left padding to the LI element.

Either way, make margin or padding an explicit value, and don't forget to add a unit or Firefox will ignore it.

cEM

sneaks

2:51 pm on Jun 22, 2005 (gmt 0)

10+ Year Member



by indent i mean the entire space that would normally be to the left and right of the bullet. i am not using bullets and just want the entire UL to be flush to the left of my div but it doesnt seem to work using padding and margin...

snx

createErrorMsg

2:59 pm on Jun 22, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



just want the entire UL to be flush to the left of my div

Zero out the padding and margins (as zackattack suggested above) on the UL and the LI and it should sit flush left as you describe. If you don't want any bullets, add list-style-type:none; to the UL styles.

cEM

sneaks

4:09 pm on Jun 22, 2005 (gmt 0)

10+ Year Member



got it.... thanks!

j.