How Do I Move The Text Over For This Part Please?

Alright guys

I have decided to change the whole bullet layout. Instead of using a separating image for the bullet, and then for the dashed line on the bottom, I have included one picture..

Now I need to know how to move the text over a little bit please... And thank you


#l_sidebar ul {
list-style: none;
margin: 0px ;
padding: 0; }

#l_sidebar li {
background: url(images/bulletback.jpg) no-repeat left;
}

#l_sidebar li a, #l_sidebar li a:visited {
color: #359CBB;
text-decoration: none;
margin: 0px;
}


My website: http://www.supreme-host.com/web/categories.php

With that margin:0px; your telling it sit right up next to it's container. Add 10px left margin like this -



#l_sidebar ul {
list-style: none;
margin: 0 0 0 10px ;
padding: 0; }

With that margin:0px; your telling it sit right up next to it's container. Add 10px left margin like this -



#l_sidebar ul {
list-style: none;
margin: 0 0 0 10px ;
padding: 0; }


Excavator

If I add the above margin code as shown above then it moves also the #l_sidebar li {
background: url(images/bulletback.jpg) no-repeat left;
}

over as well... I need to move the text over not the background image for the list properties

Ahh, that image is pretty faint and I didn't see it.
You're going to make links in the menu someday, so style the anchor to move the text over.
You've already done this before, when we put a background image on the anchor.

Like this -
#l_sidebar ul {
list-style: none;
margin: 0;
padding: 0; }

#l_sidebar li {
background: url(images/bulletback.jpg) no-repeat left;
}

#l_sidebar li a, #l_sidebar li a:visited {
color: #359CBB;
text-decoration: none;
margin: 0 0 0 10px;
}

And don't forget to add your links -


<div class="leftbox">
<ul>
<li><a href="#">Newest Products</a></li>
<li>Dollar Deals</li>
<li>Product Request</li></ul>
</div>