botones redondeados ancho variable

[ehdez82]

Hola estoy haciendo botones redondeados para cualquier tamaño. A continuación el código que estoy utilizando.

CSS:

Código CSS:

body {  
    background-color: #3F3F3F;
    margin: 0;
    padding: 0; 
}
form label {    
    color: #808080;
    font-size: 12px;    
}
.fondo {    
    background-image: url(boton_fondo.gif);
    background-repeat: repeat-x;                
}
input {
    font-family: "Trebuchet MS", "Times New Roman", sans-serif;
    font-size: 10px;    
    background-color: transparent;
    border: none;   
    vertical-align: top;
}
.boton {
    color: #C1C1C1;
    vertical-align: middle; 
}
.fondo img {        
    vertical-align: top;    
}
 

HTML:

Código HTML:

<span class="fondo">
              <img src="boton_izq.gif" width="10" height="25"/>
              <input type="submit" class="boton" name="Submit" value="Aceptar" id="aceptar_btn"/>
              <img src="boton_der.gif" width="10" height="25"/>
</span> 

[URL="http://ehrpav.260mb.com/btn_test/index.html"]http://ehrpav.260mb.com/btn_test/index.html[/URL]

El problema es que la imagen de fondo del span solo se ve correctamente en IE6. He probado manejarlo como un elemento de bloque como sigue:

Código CSS:

.fondo {    
    background-image: url(boton_fondo.gif);
    background-repeat: repeat-x;
    display: block;
    width: auto;
    float: left;                
}
 

Pero entonces no puedo centrar los elementos.
Si pudiera ser inline sería más cómodo para posicionar los elementos.

[URL="http://ehrpav.260mb.com/btn_test/index1.html"]http://ehrpav.260mb.com/btn_test/index1.html[/URL]

Helppppp.
Gracias de antemano.
salu2.