[Résolu] Bouton à largeur variable

Bonsoir,

voici mon problème :

Je souhaite faire un bouton à largeur variable, à bord arrondis.

ça marche sur FF et ie7 .. et évidement le problème se pose sur ie6 ou la largeur se fixe a 100%

voici mon code :
html:

<div class="addBasket"><a href="">add to basket</a></div>

css:

.addBasket{background:url(img/btn-list.png) no-repeat left top;display:block;float:right;height:19px;margin:3px 7px 0;padding-right:6px;}
.addBasket a{background:url(img/btn-list-right.png) no-repeat right top;display:block;height:19px;margin-left:3px;padding-right:5px;padding-top:2px;}

sur ie6 le bouton prend 100% de la largeur, il faut défnir un width pour que ca marche... mais je veux justement que mon width soit automatique...

si quelqu'un a une piste .. ! merci
Modifié par gandoulfee (13 Jan 2009 - 20:22)

Je me suis trouvé une solution ici :

http://www.zonecss.fr/exemple_css/exemple_css32.html

Bonjour,

gandoulfee a écrit :
sur ie6 le bouton prend 100% de la largeur, il faut défnir un width pour que ca marche... mais je veux justement que mon width soit automatique...

C'est un bug qui concerne IE6 uniquement, et qui survient quand on place un élément en display:block; width:auto; dans un élément flottant. Pour le «corriger», il faut faire flotter l'élément interne (ce qui dispense d'utiliser le display: block au passage, mais c'est un détail).

En passant, pour un bouton on peut partir du code HTML suivant:

<p>
	<a href="..." class="bouton"><span>Intitulé du bouton</span></a>
</p>

Pour avoir une largeur qui s'adapte automatiquement au contenu, il se peut qu'un display:inline-block (sur le lien) suffise. À explorer, car c'est moins pénalisant que l'utilisation de float.

Edit: ah oui, et la solution trouvée est ancienne et casse-gueule.
Modifié par Florent V. (13 Jan 2009 - 20:28)

Merci Florent ^^
Entre parenthèse , on été ensemble en LUP (David)

Aujourd'hui je bosse dans la même boite que l'autre Florent de LUP !!

J'espère que ça se passe bien pour toi !