Bulleted list: (setting font size or decreasing space b/w bullet and text)

Hello,

I would like to know if there is a way to decrease the space between the bullet and the text in a bulleted list. For example take "o" as a bullet in an <LI> as follows:

o   Item 1;
o   Item 2;

What usually happens in the list is that there is a space between the bullet and the text and I would like for this space to go away so as to have almost no space between the two:

o Item 3;

The reason I need this is for a navigation menu.  I have a navigation menu that expands and provides a list of sub-menus. Now, for the sub-menu, sometimes the text flows into the second line.  I would like for the text to align as follows:

o Item4: is way
   too long;

and NOT as follows:
o Item4: is way
too long;

At the same time I would like to not have any space between the text and the bullet.  I can do each one separately, as in, I can get the text to wrap/indent as well as using a "&bull;" character instead of the <li> to control the spacing between the bullet and the text, but I cannot get both together. I would appreciate anybody's help in this matter!! I have tried many different things for a while now and have lots of information to add. I hope I explained myself enough for now!

Thank you,
mnahasAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

superslamwichCommented:
You can use style and tables to get that effect:

<style type='text/css'>
td.bullet  {
  vertical-align:top;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100">
  <tr>
    <td class="bullet">&bull;</td>
    <td>EXAMPLE 1</td>
  </tr>
  <tr>
    <td class="bullet">&bull;</td>
    <td>EXAMPLE 2</td>
  </tr>
  <tr>
    <td class="bullet">&bull;</td>
    <td>EXAMPLE 3</td>
  </tr>
  <tr>
    <td class="bullet">&bull;</td>
    <td>EXAMPLE 4 is WAAAAAAAAY TOO LONG</td>
  </tr>
</table>

{Slam}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
superslamwichCommented:
You can change the distance from the bullet with the width of the cells and table:

<style type='text/css'>
td.bullet  {
  vertical-align:top;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="150">
  <tr>
    <td class="bullet" width="50">&bull;</td>
    <td>EXAMPLE 1</td>
  </tr>
  <tr>
    <td class="bullet">&bull;</td>
    <td>EXAMPLE 2</td>
  </tr>
  <tr>
    <td class="bullet">&bull;</td>
    <td>EXAMPLE 3</td>
  </tr>
  <tr>
    <td class="bullet">&bull;</td>
    <td>EXAMPLE 4 is WAAAAAAAAY TOO LONG</td>
  </tr>
</table>

{Slam}
0
seanpowellCommented:
You can use some CSS to achieve this. Try customizing the different selectors to fit your layout.

<html>
<head>
<style type="text/css">
<!--
body       { font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#000; }
.container { padding:0px; width:122px; }
.bullet    { height:30px; }
.list      { padding-left:4px; height:30px; }          
//-->
</style>
</head>
<body>
<div class="container"><span class="bullet">&bull;</span><span class="list">Item 1</span></div>
<div class="container"><span class="bullet">&bull;</span><span class="list">Item 2</span></div>
<div class="container"><span class="bullet">&bull;</span><span class="list">Item 3</span></div>
<div class="container"><span class="bullet">&bull;</span><span class="list">Item 1 is way too long</span></div>
</div>
</body>
</html>

You can also do this with an image as the bullet:
Note: The image being referenced is from this site...


<html>
<head>
<style type="text/css">
<!--
body       {
           font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#000;
           }

.container {
           padding:0px;
           width:122px;
           background:#FFF;
           }

.list      {
           padding:0px 0px 0px 6px;
           background-image: url(http://www.experts-exchange.com/images/marker.gif);
           background-repeat: no-repeat;
           background-position: left center
           height:30px;
           margin-top: 6px;
           }
//-->
</style>
</head>
<body>
<div class="container">
  <div class="list">Item 1</div>
  <div class="list">Item 2</div>
  <div class="list">Item 3</div>
  <div class="list">Item 1 is way too long</div>
</div>
</body>
</html>
0
mnahasAuthor Commented:
Thank you guys for both your answers.  I really liked georgemarian's detailed answer, but I needed something without span/div. Although, it provides lots of control to every line.  The table is something I am working with right now and was closer to what I was looking for!

Thank You for your answers!
0
seanpowellCommented:
No problem - an A would have been nice for {Slam} given that he gave you a couple of options there ;-)
Thanks,
GM
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.