[CSS]problème avec les puces d'une liste

Bonjour,
j'ai voulu mettre une image comme puce pour une liste. J'ai essayé les 2 méthodes :
-avec background-image:

#gauche_bas  dd ul {
list-style-type:none;
 background-image:url(puce.gif);
 background-repeat:no-repeat;
 background-position:0% 65%;}

-avec list-style-image:

	
#gauche_bas  dd ul {
       margin: 0 0 0 25px;
	padding: 0;
	list-style-image: url(images/puce.gif);
}
	
	

mais j'ai rien qui s'affiche avec la 1ère méthode et j'ai les puces générés par le navigateur (que je veux changer)

code css

body{
margin:0;
padding:0;
}


#gauche_bas{
	width:180px;
	height:350px;
	background-color:#B22222;
	padding-top:10px;
}


#gauche_bas li a, dt a  {
	text-decoration:none;
	color:#FFFFFF;
	margin-left:20px;
	}

html

<div id="gauche_bas">
<dl >			
		<dt ><a href="services.html" style="letter-spacing :3px ;font-size:17px; font-weight:bold; border-top:2px #FFFFFF solid;">Services</a></dt>
			<dd >
				<ul>
					<li ><a href=" " >ss menu1</a></li>
					<li ><a href=" ">ss menu2</a></li>					
					<li ><a href=" ">ss menu3</a></li>					
					<li ><a href="  ">ss menu 3</a></li>
			
					
				</ul>

			</dd>
	</dl>		

</div>

quelqu'un voit où est le problème?
Merci par avance