Largeur de boutons avec background trop petite

Hello !

J'ai un problème de largeur sur des boutons avec un arrière plan image : la largeur du bouton ne se fait pas en fonction du texte et selon les navigateurs, soit le texte est tronqué, soit il dépasse du bouton. Je n'arrive pas à résoudre ce problème.

Exemple ici, tout est dans le code de la page :
http://shuret213.free.fr/bordel/css/test.htm

Merci de votre aide !

Hello,

C'est un peu le grand n'importe quoi, ce code HTML. Des input dans des span dans des li dans des ul dans des span dans des div? Tout ça pour un simple bouton? Non seulement c'est excessif, mais c'est aussi invalide (on ne peut pas placer des éléments de type bloc dans des éléments de type en-ligne, donc pas de ul dans les span).

Il faudrait commencer par remettre à plat ce code HTML, en simplifiant autant que possible. En gros, il me semble que tu as besoin d'un double conteneur pour chaque bouton, ce qui donne le code suivant:

<ul>
	<li><span><input /></span></li>
	<li><span><input /></span></li>
	<li><span><input /></span></li>
</ul>

Et si on n'a pas une liste de boutons mais des boutons isolés, on fera plutôt:

<p><span><input /></span></p>

ou, si on veut se servir du paragraphe uniquement pour le positionnement et pas pour la décoration du bouton:

<p>
	<span><span><input /></span></span>
</p>

en donnant des classes qui vont bien aux paragraphes, li, span, etc., si le besoin s'en fait sentir.

Pour le problème qui se manifeste avec le code actuel (invalide), le problème vient principalement de ceci:

<span class="SpecialisedButtonNext" style="[#red]width: 100px[/#]">

Et voilà.
Bonne continuation.

Merci des conseils ! Je regarderai toussa demain