IE7 : Problème image background et padding

Bonjour à tous,

Je rencontre un petit problème sous ie7 pour faire des boutons correct.

Voici d'abord mon CSS :

/* Calculate shipping quote button */
#edit-panes-quotes-quote-button { 
background:transparent url(img/user-orders.png) no-repeat 0.2em 0;
border:1px dotted #D9D8C4;
cursor:pointer;
height:32px;
padding-left:40px;
margin-top:0.5em; }

et voici le rendu :

Firefox (niquel)
http://img139.imageshack.us/img139/9392/ffql5.png

IE7 et 6
http://img267.imageshack.us/img267/1043/ie7bz4.png

On dirait que IE applique le padding a partie de l'image en background, ce qui est stupide a priori. Je ne trouve pas de moyens de contourner le problème (en évitant de passer par des hack ou commentaire conditionnel si possible).

D'avance merci
Modifié par zmove (02 Jan 2008 - 10:19)

est ce que dans tes bouton ta des element en float? si c'est le cas, IE double les marges(si cettes derniéres sont appliquées) sur les element flottant.

pour y remedier tu met un

display:inline;

sur ton element floatant.

Si t'a pas d'element floattant je n'ai pas d'autre solution desolé

Non je n'ai pas de float particulier, étant donné que tout est dans un bouton.

j'ai fais des commentaires conditionnels pour palier le problème, mais j'avoue être curieux quand même de l'origine du problème, si quelqu'un à une idée...

Bonjour,

Des propriétés CSS ne s'appliquent pas dans le vide, mais sur un code HTML qu'il faudrait connaître pour pouvoir t'aider.

Elles ne s'appliquent pas non plus de manière isolée, mais dans un contexte détarminé par l'héritage et la cascade d'autres styles: toute la feuille serait donc utile.

Bref, donner l'url d'une page en ligne

Sinon, j'avoue que je pressens le pseudo-bouton CSS. Celui-ci étant à éviter dans tous les cas, cela résoudrait radicalement la question

Bonjour à tous,
J'ai exactement le même problème. Je ne vois pas du tout d'ou cela peut venir...
voici mon html :

<td colspan="4">
   <div class="right">
       <div id="submit">
           <input id="valider" type="submit" alt="Valider votre commande" value="Valider votre commande" name="commit"/>
       </div>
   </div>
</td>

et voici mon css :

.right #submit{
	width:auto;
	margin:0 0 0 0;
	height:22px;
	border: 1px solid #6D871B;
	background: #9cc127 url(../images/caddy.gif) no-repeat scroll left;
	padding-left:20px;
	padding-right:3px;
}

.right #submit input{
	font-weight: bold;
	font-size:12px;
	color: #FFFFFF;
	border:none;
	background-color:transparent;
	padding:3px 20px 0 10px;
	background: #9cc127 url(../images/fleches_droites.gif) no-repeat scroll right 5px;
}

Ce qui donne :
Pour firefox :


Pour IE 7, 6 et - :



Merci d'avance pour vos réponses.
Modifié par mar (03 Jan 2008 - 16:49)

Sgn...

Mais pourquoi diable n'utilisez-vous pas des input type="image", qui sont faits pour ça et ne posent aucun problème de compatibilité entre les navigateurs ?

(Sans compter qu'ils donnent un résultat accessible, eux)

Parcequ'il y aura plusieurs langues dans le site, et j'aurai aimé ne pas avoir à refaire tous les boutons. Je voulais qu'en fonction de la longueur du nom du bouton, celui-ci s'agrandisse tout seul.

Si c'est la seule solution, je vais faire des images, mais cela ne résoudra pas le problème...
Regarde, rien que cette page :
http://forum.alsacreations.com/search.php
Sous IE les marges du bouton "rechercher" sont plus importantes que sous firefox. C'est pas terrible quand même.
Merci quand même.
Modifié par mar (03 Jan 2008 - 17:29)