28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous!

J'ai un bug curieux sur IE8. J'ai stylisé mes boutons submit avec des images. Si sur l'ensemble des navigateurs cela fonctionne, ce n'est pas le cas avec IE8 ( on voit le value et le border).

Voici le style:
.submit {
background-image: url(../images/btt-add.gif) ;cursor: pointer;width:32px; height:32px; color:transparent;  border:none; 
}


et le html contenu dans mon php:
echo'<input name="envoi" type="submit" VALUE='.$classement['id_vendeur'].' 
	class="submit" title="AJOUTER DES CARTONS"/>



Auriez vous une idée de ce qui provoque le bug?

Merci d'avance
Modifié par Byld (18 Feb 2012 - 12:26)
j'ai trouvé la solution! none n'est pas compris pour le border j'ai donc rempalacé par 0. Ensuite un font-size à zéro et un color qui correspondont au fond des deux pixels laissés par le font-size!


Par contre, je ne sais pas comment passer mon topic en [résolu] Smiley confused
Byld a écrit :
Par contre, je ne sais pas comment passer mon topic en [résolu] Smiley confused

Bonjour,

Il te suffit d'éditer ton premier sujet et de rajouter le tag [résolu] dans le titre de cestuy-là Smiley cligne
Bonjour,

LA bonne manière de faire un bouton de formulaire avec une image c'est ça:
<!-- Bouton de soumission de formulaire -->
<input type="image" src="monimage.png" alt="Libellé du bouton" />
<!-- Syntaxe alternative pour un bouton de soumission -->
<button type="submit">
  <img src="monimage.png" alt="Libellé du bouton" />
</button>
<!-- Syntaxe pour un bouton sans action par défaut (pour du scripting par exemple) -->
<button type="button">
  <img src="monimage.png" alt="Libellé du bouton" />
</button>

Toutes les autres astuces posent des problèmes d'accessibilité. Par exemple avec la technique de font-size à zéro que tu emploies:
- Si l'utilisateur a défini une taille de texte minimale, le texte est affiché par dessus l'image.
- Si l'utilisateur a choisi d'appliquer ses propres styles de texte (option d'accessibilité offerte notamment par Firefox et Internet Explorer), le texte est affiché par dessus l'image.
- Si les styles CSS sont appliqués mais que l'image ne se charge pas pour une raison ou une autre (problème réseau, latence réseau, choix de l'utilisateur), le texte est invisible et l'image aussi.
Modifié par fvsch (18 Feb 2012 - 12:35)
fvsch a écrit :
Bonjour,

LA bonne manière de faire un bouton de formulaire avec une image c'est ça:
&lt;!-- Bouton de soumission de formulaire --&gt;
&lt;input type=&quot;image&quot; src=&quot;monimage.png&quot; alt=&quot;Libellé du bouton&quot; /&gt;
&lt;!-- Syntaxe alternative pour un bouton de soumission --&gt;
&lt;button type=&quot;submit&quot;&gt;
  &lt;img src=&quot;monimage.png&quot; alt=&quot;Libellé du bouton&quot; /&gt;
&lt;/button&gt;
&lt;!-- Syntaxe pour un bouton sans action par défaut (pour du scripting par exemple) --&gt;
&lt;button type=&quot;button&quot;&gt;
  &lt;img src=&quot;monimage.png&quot; alt=&quot;Libellé du bouton&quot; /&gt;
&lt;/button&gt;

Toutes les autres astuces posent des problèmes d'accessibilité. Par exemple avec la technique de font-size à zéro que tu emploies:
- Si l'utilisateur a défini une taille de texte minimale, le texte est affiché par dessus l'image.
- Si l'utilisateur a choisi d'appliquer ses propres styles de texte (option d'accessibilité offerte notamment par Firefox et Internet Explorer), le texte est affiché par dessus l'image.
- Si les styles CSS sont appliqués mais que l'image ne se charge pas pour une raison ou une autre (problème réseau, latence réseau, choix de l'utilisateur), le texte est invisible et l'image aussi.


Entièrement d'accord avec toi! Mais comme tu ne le vois pas je suis dans un contexte un peu particulier où le bouton submit est dans une colonne de tableau et "trimbale" avec lui un id que je récupère ensuite et bien entendu avec un
$_POST['id']
. Dans mon cas je ne vois pas comment envoyer un id en post avec un img src..?
Hello,

La valeur du bouton submit ne sert à rien d'autre que d'expliquer l'action qu'il engendre.

Si tu souhaite stocker un ID et le récupérer plus tard, utilise un champ caché :

<input type="hidden" name="id" value="ton_id" />


En espérant t'avoir aidé.