Rusty Flare Brain Needs Help With List Indent

[CanAussie]

G'day,

It's been a while and what I am look to do is have the bullet points in a list line up with regular text. In other words, no indent.

What do I alter to make this happen?

SAMPLE:

My wife wants me to:

- Wash the Dishes
- Do the Laundry
- Dress like a lumberjack.

Please help.

Cheers,

Canaussie

[Nita Beck]

You probably need to adjust your CSS for the ol and ul classes so that they have a negative left margin of sufficient amount to nudge the whole list to the left to the position you want. I suggest that you create subclasses of the ol and ul classes, rather than to alter these base classes. Then apply the appropriate subclass to the list you want to nudge left.

[luvthepug]

I had the same issue.

Refer to this thread: http://forums.madcapsoftware.com/viewto ... =6&t=20237

[Mike Kelley]

Nita is on the right track, but you might be better off using a padding-left rule instead of negative margin. All browsers have a default left padding for lists, unless you override it (in Chrome, it's 40px). You can override this setting, but I would do it for a particular ol or ul subclass as Nita suggested. Specifying your own padding-left rule overrides the browser's default style, so I think it's better to do that than to add a rule of a negative margin-left. If you did a negative margin-left, it would work fine, but then the browser would have TWO styles to enforce on the list instead of just one. Setting it to 0px puts the text of the list item flush with your body content's left edge, which puts your bullet icon in no-man's land. Try a setting like this:

Code: Select all

.indentNone {
    padding-left: 18px;
}

Be sure to add the .indentNone class to any list you don't want the browser to indent. Now the browser has only one rule to worry about and it works on only the lists you want it to.