troubleshooting Question

How can I get zero padding on a custom li image using css.

Avatar of krussell222
krussell222 asked on
CSS
3 Comments1 Solution397 ViewsLast Modified:
I have a unordered list for which I am using an image for the bullet.  Is there a way to get zero space between the image and the list items.  For example, I would like to see '>Special Reports' instead of '>  Special Reports'

I've attached a screen shot of the list as well as the custom image I am using.  The html/css I am using is included below.


HTML:
<div id="nav">
<ul>
	<li><a href=special-reports/" title="View all posts filed under Special Reports">Special Reports</a>
</li>
	<li><a href="articles/" title="View all posts filed under Published Articles">Published Articles</a>
</li>
 
	<li><a href="pamphlets/" title="View all posts filed under Pamphlets">Pamphlets</a>
</li>
	<li><a href="audiovideo/" title="View all posts filed under Audio/Video">Audio/Video</a>
</li>
</ul>
</div>
 
 
CSS:
 
ul {
   margin-top: 0;
   margin-bottom: 0;
   margin-right: 0;
   margin-left: 0;
   padding-top: 10px;
   padding-bottom: 0;
   padding-right: 0;
   padding-left: 20px;	
}
 
li {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;	
}
 
#nav {
	position: relative; 
	top: 25px;  
	font-size: 85%; 
	width: 205px;
	height: 134px;
	float: left;  
	line-height: 20px;
 
}
 
#nav ul {
	list-style-type:none;
}
 
#nav li {
margin-left: 0;
padding-left: 0;
}
 
#nav ul li { 
    margin-left: 10px;
    list-style-image: url(/images/nav_list_bullet.jpg);
    border-bottom: dotted;
	border-bottom-color: #1B8B38; 
}
 
 
#nav li a {
	color: #fff;
	font-weight: bold;
	margin: 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    
}
 
#nav li a:hover, #nav li.current_page_item a {
	font-weight: bold;
/*	color: #f5ca30; */
	margin: 0px;
}
#nav_tips {
    position: relative;
    top: 14px;
    left: 10px;
    float: left;
    font-size: 90%; 
    width: 490px;
    font-weight: bold;
    color: #f5ca30;
	line-height: 23px;
}
nav-list-bullet.jpg
list.jpg
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 3 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros