Control the gap between a bullet and its text 1

[SnaveBelac]

I am using an unordered list - nothing very cimplicated about that.

For the look of the site I am designing I think the text is too bunched up against the associated bullet point. In most cases I can just put some non-breaking spaces in to move the text a little to the right.

The problem now arises that; if the text wraps onto a second line it wraps around in-line with the original margin for the list and hence is

Is there a way to control the space between the bullet and text either with HTML or CSS?

Thanks in advance

----------------------------
SnaveBelac - Adventurer

http://www.hostpipe.co.uk

 

[vongrunt]

Try CSS padding-left on <li> element.

 

[SnaveBelac]

Thanks for quick reply.

That has moved the enrite <li>...</li> section further to the right when what I want to do is increase the size of the gap between the bullet and the text.

I have been thinking I could either use a custom bullet with a wide margin on the right or place some other tag around each list element to provide a gap.

Any thoughts ?

----------------------------
SnaveBelac - Adventurer

http://www.hostpipe.co.uk

 

[BabyJeffy]

Try margin-left instead?

Jeff

 

[vongrunt]

Here is a simple test:

<ul>
<li>Blah</li>
<li style="padding-left: 10px;">Blah</li>
<li style="padding-left: 20px;">Blah</li>
<li style="margin-left: 10px;">Blah</li>
<li style="margin-left: 20px;">Blah</li>
</ul>

This happens to me (IE6/ff0.8):
- positive padding always increases gap between bullet and text
- positive margin increases indentation (both bullet and text are shifted right)

 

[BillyRayPreachersSon]

Or margin-right if that fails ;o)

Dan

 

[SnaveBelac]

margin-left has the same effect as padding-left. It moves the entire bullet.

<li><div style="margin-left: 20px;">text here</div></li>

This produces the desired result but means I have to add a div tag to each list item which is the sort of thing I am trying to avoid.

Any other ideas ? I think I may have to stick with a custom bullet.



----------------------------
SnaveBelac - Adventurer

http://www.hostpipe.co.uk

 

[vongrunt]

Just to be sure: what browser do you have?

 

[SnaveBelac]

Damn silly fool I am - was looking at the cached page and wondering why nothing was changing - Its been a few years since I made that mistake !!!

I use IE6 by the way.

Thanks vongrunt - solution was exaclty what I was looking for.

----------------------------
SnaveBelac - Adventurer

http://www.hostpipe.co.uk