Ajustar imagen a texto en menu

[Menganez]

Hola compas.

No se de esto pero encontré un menú css en la web y quise personalizarlo pero me tope con el siguiente problema: Tengo las imágenes de fondo de cada botón del menú y quisiera que se estiraran o encogieran horizontalmente en función del espacio que ocupe el texto y no logro conseguirlo.
La falla es esta: http://chicas-en-facebook.blogspot.com/

Los códigos son:

Código:

.cssmenu ul{
	margin:2;
	padding:1;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:38px;
	text-transform:capitalize;
	font-size:10px;
	font-weight:bold;
	background:transparent url(' TRANSPARENTE ') repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:1px solid #000000;
	border-top:1px solid #000000;
}
.cssmenu li{
	display:block;
	float:left;
	margin:10;
	padding:30;
	}
.cssmenu li a{
	display:block;
	float:left;
	color:#000000;
	text-decoration:none;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px;
	background:transparent url('http://i1092.photobucket.com/albums/i411/menganez/Blog%20face/Menu_gris1.png') repeat-x;
	}
.cssmenu li a:hover{
	background:transparent url('http://i1092.photobucket.com/albums/i411/menganez/Blog%20face/Menu_azul1.png') top right;

Código:

<div class='cssmenu'>
<ul>
   <li><a href='http://chicas-en-facebook.blogspot.com/'><span>Pagina Principal</span></a></li>
   <li><a href='http://chicas-en-facebook.blogspot.com/p/contacto.html'><span>¿Quieres ser parte de nuestro directorio?</span></a></li>
   <li><a href='http://chicas-en-facebook.blogspot.com/p/contacto.html'><span>¡Conozco una chica linda!</span></a></li>
<li><a href='http://www.facebook.com/' target="_blank"><span>Ir a Facebook.Com</span></a></li>
<li><a href='http://chicas-en-facebook.blogspot.com/p/intercambio-de-enlaces.html'><span>Intercambio de enlaces</span></a></li>
</ul>
</div>

Desde ya agradezco la ayuda que puedan brindar.
Saludos.

[wlinker]

Cuate creo que ésto es lo que ocupas, reemplaza tus ultimas dos propiedades CSS por ésto:

Código CSS:

.cssmenu li a{
    width: 155px;
    text-align:center;
    display:block;
    float:left;
    color:#000000;
    text-decoration:none;
    font-weight:bold;
    padding:10px 20px 0 20px;
    height:34px;
    display:block;
    background:transparent url('http://i1092.photobucket.com/albums/i411/menganez/Blog%20face/Menu_gris1.png')  no-repeat;
    }
.cssmenu li a:hover{
    background-image:url('http://i1092.photobucket.com/albums/i411/menganez/Blog%20face/Menu_azul1.png');
 

[wlinker]

y como sugerencia te diré que no utilizes textos muy largos en tus menus horizonales, los menús son solo "vinculos sugerentes" "importantes" "relevantes" y deben de ser claros, legibles y fáciles de captar por tanto para tus visitantes, :) un saludo!

[Menganez]

Gracias compañero.
Lo probare.

Y gracias por los consejos.

[wlinker]

oks, saludos.