<ul> Problem...

How to get <ul> to behave properly

[croakingtoad]

Take a look at this page:

Notice the bullets, they have the following styles by css:

ul { list-style: disc outside; marker-offset: 0px; }

The problem is, I want these to be aligned with the left-margin of the table column they are in, but I can't get it to happen. I've tried everything I can think of. I know there's the { display: inline; } but that causes the text to wrap under the bullet, which I don't want.

Any help would be much appreciated, in short, I want it to display as an inline property, with no top and bottom breaks, left alignment, but I want to retain the wrapping as it's shown above.

HELP!

[edited by: heini at 2:51 pm (utc) on May 11, 2003]
[edit reason] no urls please, thank you! [/edit]

[grahamstewart]

Hi toad,

Welcome to WebmasterWorld [webmasterworld.com]

I want these to be aligned with the left-margin of the table column they are in

Easy... stop using tables for layout! Its not what they are meant for and as a medical site you should be more aware of accessibility and the need for proper markup! :(

However, I'd say your problem is that <ul> have a left margin by default. Just add a

margin-left:0

in there and the indent should go away.

[croakingtoad]

I've tried that...it doesn't work either...it causes me to lose the bullets...?

<table>My Crutch</table>

I'm not the original site designer though...

[edited by: croakingtoad at 2:49 pm (utc) on May 11, 2003]

[grahamstewart]

The 'top and bottom breaks' are also just margins. So you can get rid of them with

margin:0;

BTW, its against the TOS of this site to post links to your own sites. Its better to describe the problem instead (that way this post will still be meaningful when someone digs it up sometime in the future).

Can I also recommend these fine additions to your web creation toolkit...

W3C HTML Validator [validator.w3.org]

W3C CSS validator [jigsaw.w3.org]

[croakingtoad]

I'll remember that, does anyone ever read the TOS anyway?! haha

But back to my problem, when I use the margin-left: 0px; it causes the alignment to be right, but my bullets disappear...

Any idea how to overcome that?

[grahamstewart]

hmm.. try specifying the list-style as 'inside' instead of 'outside'

does anyone ever read the TOS anyway?

Yup, heini does :)

[croakingtoad]

I tried that, it works on getting everything to the left, but you lose the wrapping thing, it starts wrapping under the bullet again.

I just 'fixed' it, here's what I did (with your help):

ul { list-style: disc outside; margin-left: 20px; }

Setting margin-left to 0px causes the bullets to cut off, so I started adding until I got to 20px, now it looks good :)