homepage Welcome to WebmasterWorld Guest from 54.226.136.179
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
kapow

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 260 posted 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

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



 
Msg#: 260 posted 2:57 pm on Jul 31, 2002 (gmt 0)

li{margin-left:0px;}

kapow

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 260 posted 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

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



 
Msg#: 260 posted 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

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



 
Msg#: 260 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 260 posted 3:24 pm on Jul 31, 2002 (gmt 0)

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

kapow

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 260 posted 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

10+ Year Member



 
Msg#: 260 posted 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