ho creato un menu con immagini in roll over con una lista non ordinata è tutto ok solo che ho il testo allineatoa destra e non riesco a dargli uno spazio dal bordo se avessi il testo allineato a sinistra con text indent avrei risolto ma non è cosi qualcuno ha qualche idea ?

posto il css
codice:
#menuSX{
margin:0px;
padding: 0px;
width:178px;
height:435px;
float:left;
background-color: #009933;
padding: 0px;

}
#menuSX ul{

margin:0px;
padding:0px;
}
#menuSX li{
  background-image: url(images/menuSX/botton.gif);
  list-style:none; 
  float: left;
  margin:0px;
   padding: 0px;
  font-size: 12px;
  text-align:right;
  color:#FFFFFF;
  line-height:17px;
  height: 17px;
  width:178px;
  
  }
#menuSX li.scuro a {
  display: block;
  padding: 0px;
  float: none; 
  text-decoration: none;
  color:#FFFFFF;  
   line-height: 17px;
   width:178px;
   background: url(images/menuSX/botton.gif) 0px 0px repeat-x;
}
#menuSX li.scuro a:hover {
  display: block;
  padding: 0px;
  float: none; 
  text-decoration: none;  
   line-height: 17px;
   width:178px;
  background: url(images/menuSX/botton-over.gif) 0px 0px no-repeat;
}
#menuSX li.chiaro a {
  display: block;
  padding: 0px;
  float: none; 
  text-decoration: none;
  color:#FFFFFF;  
   line-height: 17px;
   background: url(images/menuSX/botton-over.gif) 0px 0px no-repeat;
}
#menuSX li.chiaro a:hover {
  display: block;
  padding: 0px;
  float: none; 
  text-decoration: none;  
   line-height: 17px;
  background: url(images/menuSX/botton.gif) 0px 0px no-repeat;
}