Welcome to WebmasterWorld Guest from 54.197.171.28

Forum Moderators: not2easy

Message Too Old, No Replies

How to remove indent from bullets in CSS

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

WebmasterWorld Senior Member 10+ Year Member



Is there a CCS way to remove/alter the default indent on a bulleted list?
2:57 pm on Jul 31, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



li{margin-left:0px;}
3:02 pm on Jul 31, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?

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

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



> 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.

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

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



ul{list-style:none}
<li>&bull; list item</li>
</ul>

Chararcter entity &#8226; also knwn as &bull; can be used in combination with {list-style:none}

As Nick_W suggests: test, test, test!

- papabaer

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

WebmasterWorld Senior Member 10+ Year Member



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?

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

10+ Year Member



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.