[Résolu] Margin de 2px sur les inputs sous IE

Hello,

C'est peut-être un problème classique, mais je n'ai pas pu y trouver de solution.

Comme on peut le voir sur cette page, IE semble mettre un margin de 2px sur les inputs, ce que ne fait pas FF.

Le décalage est donc vertical, mais aussi horizontal, même si c'est moins visible.

Si vous avez une solution pour supprimer ces 2px, sans passer par des commentaires conditionnels, merci de votre aide !
Modifié par Tong (18 Aug 2007 - 14:42)

Salut,

Tong a écrit :
Si vous avez une solution pour supprimer ces 2px, sans passer par des commentaires conditionnels, merci de votre aide !

Quand j'ai une roue dégonflée sur mon vélo et que j'ai une pompe à vélo à ma disposition, je vais rarement chercher s'il y a une autre solution pour regonfler ma roue, la pompe étant suffisamment efficace pour ça.

Mais avant cela, déjà, ton site ne comporte pas de doctype, contient 74 erreurs rendant la page invalide. Peut être qu'il serait bon de commencer par là, car IE interprète ton code en mode quirk, qui forcément ne se comporte pas comme il devrait avec un doctype.

Un peu de documentation :
- Doctype, comment choisir ?
- A propos du modèle de boite Microsoft (ou quirk)

Mais plus généralement, tu as la FAQ et les tutoriels à ta disposition pour compléter ton apprentissage.
Modifié par Mikachu (18 Aug 2007 - 12:35)

J'aimerais bien, mais non je ne suis pas le webmaster du journaldunet

Seulement je travaille sur mon site en local pour le moment, et plutôt que de faire des captures, j'ai trouvé que c'était plus pratique de montrer cette page, qui donne le code css correspondant directement.

Je ne pense pas que ce soit un problème de doctype, mon site est valide XHTML transitional, comporte un doctype bien comme il faut, et pourtant le problème est exactement le même, au pixel près que sur le tuto du journaldunet.

Et quand j'ai une roue crevée sur mon vélo, j'essaye avant de la réparer à coup de rustine, de comprendre d'où vient la crevaison

Merci de ton aide

Ah oui, forcément si tu donne une page en ligne qui ne correspond pas, çà va pas être évident... Je pense qu'il faudrait que tu donne au moins ton code html et css intégralement, ou si possible la page en ligne, ce qui serait l'idéal.
Pour t'aider çà sera plus simple que sur le code d'un autre site.

Tong a écrit :
Et quand j'ai une roue crevée sur mon vélo, j'essaye avant de la réparer à coup de rustine, de comprendre d'où vient la crevaison cligne

Oui, mais pour identifier l'endroit de la crevaison, tu commence par gonfler le pneu dans une bassine d'eau pour voir les bulles et trouver le trou.
mais la je ne parlais que de pneu dégonflé

Tong a écrit :
Hello,

C'est peut-être un problème classique, mais je n'ai pas pu y trouver de solution.

Comme on peut le voir sur cette page, IE semble mettre un margin de 2px sur les inputs, ce que ne fait pas FF.

Le décalage est donc vertical, mais aussi horizontal, même si c'est moins visible.

Si vous avez une solution pour supprimer ces 2px, sans passer par des commentaires conditionnels, merci de votre aide !

A vue de nez ça semble être une différence dans la css par défaut du navigateur, puisque les éléments en question n'ont pas de margin padding définis dans le css.

Au risque de me faire encore assassiner, je suggérerais de mettre, au moins à titre temporaire, un petit reset dans ta feuille de style (par exemple * {margin:0 ; padding:0;}
Si le problème disparait, c'est que c'était bien ça, il te reste à choisir entre cette solution "horrible" du reset, ou trouver les sélecteurs qui vont bien pour définir marge et padding.
Si le problème persiste, tu enlèves le reset et tu continues à chercher le trou

Marie-Aude a écrit :

Au risque de me faire encore assassiner, je suggérerais de mettre, au moins à titre temporaire, un petit reset dans ta feuille de style (par exemple * {margin:0 ; padding:0;}

Peut être pas nécessaire d'en arriver à celà, qui risquerait de revoir les margin et padding de tous le site.
Il suffit de faire un reset sur les éléments concernés, ou leur parent.

Le problème est le même ici, sur le formulaire de contact d'alsacreations

(même si c'est peu visible, il y a bien un margin de 2px autour des inputs chez ie qui n'est pas présent sous ff )

Alors mon code html :

<form action="" class="test">
  <fieldset>
    <legend>Inscription</legend>
    <label for="nom">Username:</label>
    <input type="text" name="nom" id="nom" />
    <br />
    <label for="prenom">Prénom:</label>
    <input type="text" name="prenom" id="prenom" />
    <br />
    <label for="addresse">Adresse:</label>
    <input type="text" name="adresse" id="adresse" />
  </fieldset>
</form>

Le css correspondant :

form.test fieldset
  {
  padding: 1em;
  }
form.test label
  {
  display: inline;
  float: left;
  width: 70px;
  }

Désolé hein, je me répète

Pour répondre à Marie-claude, un reset css ne change rien, et .... j'arrive pas à trouver le trou
Modifié par Tong (18 Aug 2007 - 13:59)

Mikachu a écrit :

Peut être pas nécessaire d'en arriver à celà, qui risquerait de revoir les margin et padding de tous le site.
Il suffit de faire un reset sur les éléments concernés, ou leur parent.

C'est vrai mais pour un test, c'est plus simple et plus rapide que d'écrire et d'identifier pour tous les éléments, parents, etc... après dans le vrai css on raffine

Bon j'ai finalement trouvé une solution qui me convient.

On dirait qu'on ne peut pas passer outre ces 2 pixels en utilisant la structure précédente alors je place les labels et inputs en absolute dans un div qui les englobe tout les deux.

HTML :

<form action="" class="test">
  <fieldset>
    <legend>Inscription</legend>
    
    <div class="input_line">
        <label for="nom">Username:</label>
        <input type="text" name="nom" id="nom" />
    </div>
    
    <div class="input_line">
        <label for="prenom">Prénom:</label>
        <input type="text" name="prenom" id="prenom" />
    </div>
    
	<div class="input_line">
        <label for="addresse">Adresse:</label>
        <input type="text" name="adresse" id="adresse" />
    </div>
    
  </fieldset>
</form>

CSS :

form.test label {
	position:absolute;
	width:200px;
	text-align:right;
  }

form.test input {
	position:absolute;
	margin-left:200px;
	height:17px;	
  }

form.test .input_line {
	position:relative;
	height:21px;
  }

Et ca roule

Merci de votre aide.