homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

How to remove indent from bullets in CSS

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

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



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



 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?


 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.


 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 ;)



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

<li>&bull; list item</li>

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)

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)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved