Una lista contenida en un div: no colorea :(

[verm83]

Bueno, resulta que tengo una lista dentro de un div y crea un efecto raro en el color de fondo de éste; mete espacios sin colorear arriba y abajo de la lista. Le he dado mil vueltas, y no consigo saber porqué hace ese efecto y mejor aún, como solucionarlo. Aquí dejo el código y una imagen, para que veáis lo que comento. Gracias de antemano.

Imagen: hZZp://img167.imageshack.us/img167/1622/untitled2op0.gif (Cambiar ZZ por tt)

Código HTML:

<div id="caja_entornos">
 <div class="servidores">
  <ul>
   <li><span class="" onclick="">Uno</span></li>
   <li><span class="" onclick="">Otro</span></li>
   <li><span class="" onclick="">Otro mas</span></li>
   <li><span class="" onclick="">Otro mas again</span></li>
  </ul>
 </div>
</div> 

Código:

#caja_entornos {
 width: 140px;
 margin: 20px 10px 20px 20px;
 border: 1px solid #c2c2c2;
}
#caja_entornos div.servidores {
 width: 140px;
 clear: both;
 text-align: left;
 background-color: #f4f4f4;
}
#caja_entornos div.servidores ul {
 margin: 6px 0 6px 18px;
 padding: 0;
 list-style-image: url(../img/list_style.gif);
}
#caja_entornos div.servidores ul li {
 margin: 4px 0 4px 0;
}
#caja_entornos div.servidores ul li span {
 color: #010660;
 text-decoration: none;
}
#caja_entornos div.servidores ul li span:hover {
 color: #666666;
 cursor: pointer;
}