Friday, April 10, 2009

Getting an Indented List to not Indent

It seems like it should be really easy. I want a bulleted list, but with no indent. In other words, I want the bullets aligned to the left with no indent, but I still want the space between the bullet and the text.

Why would I want this? Lots of reasons. I may have a list that is contained in a table in a page column where it makes no sense to indent the list.

It seems like this should be easily controlled with CSS, but not so. All my attempts at this resulted in results other than what I wanted. Attempts to reduce the left indent usually resulted in the bullet simply vanishing or other odd stuff. I tried having the list items without the actual list tag, which worked in some browsers but not others; I encountered problems with the text wrapping under the bullet.

I thought I must be missing something so I searched a bit online. It seems there really is no good way to do this. Apparently the indented list was intended to be just that - an indented list. Thus, there is no standard reliable way to change it.

What you end up having to do is create a table where each row is a list item with two cells. One cell contains an image for your bullet, the other contains your text. It works, but it's hardly efficient.

Just one of those HTML oddities, I suppose.

No comments: