How to remove indent from bullets in CSS

Forum Moderators: not2easy

Message Too Old, No Replies

How to remove indent from bullets in CSS

kapow

2:49 pm on Jul 31, 2002 (gmt 0)

Is there a CCS way to remove/alter the default indent on a bulleted list?

pageoneresults

2:57 pm on Jul 31, 2002 (gmt 0)

li{margin-left:0px;}

kapow

3:02 pm on Jul 31, 2002 (gmt 0)

Thanks Pageoneresults
I just worked it out too (don't know why I didn't think of that in the first place).

Is there a way to reduce the gap between the bullet symbol and the text?

pageoneresults

3:04 pm on Jul 31, 2002 (gmt 0)

> Is there a way to reduce the gap between the bullet symbol and the text?

I think that is one that has not been figured out. If I'm not mistaken, there was another thread on this in the past 30 days. I believe the answer was to use an image instead of the bullet as a means of controlling the space.

I've found myself using <ol> more due to lists with more than 5 items. Clients seem to appreciate the instruction to visit link #12 on such and such a page.

Nick_W

3:09 pm on Jul 31, 2002 (gmt 0)

You can however alter the distance between the list items vertically by adjusting the margins on li's.

Be carefull testing in as much as possible with list formatting, I can't remember which browser it was but I had a nasty shock on one of the more popular ones a while back ;)

Nick

papabaer

3:24 pm on Jul 31, 2002 (gmt 0)

ul{list-style:none}
<li>• list item</li>
</ul>

Chararcter entity • also knwn as • can be used in combination with {list-style:none}

As Nick_W suggests: test, test, test!

- papabaer

kapow

4:46 pm on Jul 31, 2002 (gmt 0)

I'm using an image for the bullet:

ul { margin-top:0em; margin-bottom:0em; margin-left:1.3em; margin-right:0em; list-style-image: url("bullet.gif")}
li {font-size: 90%; color: #ffffff;}

So, its not possible to reduce the gap between bullet and text? I see that I could increase it by adding blank space into my image, but can it be reduced?

rewboss

6:26 am on Aug 1, 2002 (gmt 0)

You can set list-style-position: inside; or list-style-position: outside; -- I don't know how readable inside is, but it's there. outside (the default) places the bullet in the element's margin, but the CSS specs don't specify anything other than that. That suggests you can fiddle around with the margin-left property, but there's no guarantee the results will be consistent across browsers.