How Do I Position The Text Closer to The Bullet Arrow Image?

Alright guys

I am wondering how do I position the text to be closer to the bullet arrow image, without effect any of the other parts of the lists.


/************************************************

* Left Sidebar *

************************************************/



#l_sidebar {

float: left;

width: 175px;

margin: 0px 0px 0px 10px;

padding: 0px;

line-height: 20px;

display: inline;

}



#l_sidebar p {

padding: 0px;

margin: 0px;

}



#l_sidebar a img {

border: none;

margin: 0px;

padding: 0px;

}



#l_sidebar h2 {


height: 45px;

color: #f9ea45;

font-size: 12px;

font-family: Verdana;

font-weight: bold;

margin: 0px 0px 10px 0px;

padding: 1px 0px 1px 5px;

line-height: 42px;

}



#l_sidebar h3 {

color: #006699;

font-size: 18px;

font-family: Times New Roman, Tahoma, Verdana;

font-weight: normal;

margin: 0px 0px 5px 0px;

padding: 0px;

line-height: 20px;

}

#l_sidebar ul {
list-style-image:url("images/m10.jpg");
margin: 0px 0px 0px 8px;
padding:0px;
}

#l_sidebar li {
background:transparent url(images/dashline.jpg) no-repeat scroll -10px bottom;
list-style-position:inside;
list-style-type:disc;
padding:5px;
}

#l_sidebar li li {
background: #FFFFFF }

#l_sidebar li a, #l_sidebar li a:visited { color: #359CBB; text-decoration: none; }
#l_sidebar li a:hover, #l_sidebar li a:active { color: #444; }

.leftboxheader {

background: #FFFFFF;

float: left;

width: 175px;

height: 33px;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;


}


.leftbox {

background: #FFFFFF;

float: left;

width: 171px;

margin: px 0px 0px 0px;

padding: 0px 0px 0px 0px;

border-left: 2px solid #9B9B9B;

border-right: 2px solid #9B9B9B;

font-size: 11px;

font-family: Tahoma;

font-weight: Bold;

color: #359CBB;


}

.leftbottom {

background: #FFFFFF url(images/borderbottom.jpg) no-repeat;

float: left;

width: 175px;

height: 10px;

margin: 0px 0px 0px 0px;

padding: 0px 0px 10px 0px;


}


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

The position of list bullets can’t be influenced very much and the visual outcome differs in different browsers. For this reason it’s better to remove the list style and apply the bullets as background images to the list items. You can then influence the horizontal position with left padding.

I gave you a link to an example that shows you this before, I'll show you some code this time.
If you make the image a background of the li you can control it much easier than replacing the bullet with your own image.
Try it like this once -
CSS -
#l_sidebar ul {
list-style:none;
margin: 0px 0px 0px 8px;
padding:0px;
}

#l_sidebar li {
background:transparent url(images/dashline.jpg) no-repeat scroll -10px bottom;
padding:5px;
}

#l_sidebar li li {
background: #FFFFFF }

#l_sidebar li a:link {
background: url("images/m10.jpg") no-repeat 0 5px;
color: #359CBB;
text-decoration: none;
padding: 0 0 0 5px;
}
And, of course, you need a link in your ul -

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


/edit - Like VIP says, as a background you have more control over it. I just put it as a background of the anchor since you already have your dotted line as a background of the li.

I gave you a link to an example that shows you this before, I'll show you some code this time.
If you make the image a background of the li you can control it much easier than replacing the bullet with your own image.
Try it like this once -
CSS -
#l_sidebar ul {
list-style:none;
margin: 0px 0px 0px 8px;
padding:0px;
}

#l_sidebar li {
background:transparent url(images/dashline.jpg) no-repeat scroll -10px bottom;
padding:5px;
}

#l_sidebar li li {
background: #FFFFFF }

#l_sidebar li a:link {
background: url("images/m10.jpg") no-repeat 0 5px;
color: #359CBB;
text-decoration: none;
padding: 0 0 0 5px;
}
And, of course, you need a link in your ul -

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


/edit - Like VIP says, as a background you have more control over it. I just put it as a background of the anchor since you already have your dotted line as a background of the li.

I am sorry to say that I have just changed my code over to the one that you supplied.. And when I do I loose the bullet image completely...

Have you included anchors in the list?