Urgente botón CSS!!!

[jarenawer]

Hola,
necesito ayuda urgente.
Tengo un botón formado por tres imágenes, dos tapas redondeadas y una parte central rectangular extensible según longitud del texto.

La cuestión es que cuando utilizo imágenes de 30 pixels hace que la parte central se extienda tanto que forma picos que aparecen después de las tapas redondeadas, dando la apariencia de un botón rectangular.
Sin embargo, cuando la imagen es de 19 pixels el botón aparece bien, con su parte central rectangular y las dos tapas dando la apariencia redondeada en los bordes.
Alguien sabe qué está pasando? Cómo lo puedo solucionar modificando el CSS?

El CSS es el siguiente:

.massive_button_holder{
list-style:none outside;
margin:0px;
padding:0px;
font-family:arial;
font-size:12px;
color:#fff;
border: none;
vertical-align: top;
width:auto;
}

.massive_button_holder input:link, .massive_button_holder input:hover, .massive_button_holder input:active, .massive_button_holder input:visited{
color:#fff;
font-weight:bold;
text-decoration:none;
}

.massive_button_holder *{
width: 1;
overflow: visible;
}

.massive_button_holder li{
float:left;
margin-right: 5px;
background:url(../img/30_px/Blue/30_blue_middle_off.gif) repeat-x top left;
width: auto;
}

.massive_button_holder span {
display:block;
background:url(../img/30_px/Blue/30_blue_right_off.gif) no-repeat top right;
}

.massive_button_holder span input{
display:block;
background:url(../img/30_px/Blue/30_blue_left_off.gif) no-repeat top left;
height:30px;
padding:2px 5px 0px 5px;
}