28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un pb dont je ne trouve pas la solution ... c'est vraiment bizarre:
IE7 met 1px de margin et de padding en plus que FF3 sur tous mes champs input text.

D'où ça vient?
Et comment puis-je résoudre ce problème?


/* ma CSS */
input,select	{  
   font-family: verdana,helvetica,arial,sans-serif; color: #b0b0ae; font-size: 100%; line-height: 12px;
   margin-top: 2px; margin-bottom: 2px;
   padding: 2px 5px 2px 10px;
				}


Merci de votre aide,
Thierry
Thithi32 a écrit :
IE7 met 1px de margin et de padding en plus que FF3 sur tous mes champs input text.

D'où ça vient?

Du fait que c'est comme ça et pas autrement. Autrement dit, c'est arbitraire. Ce qui est logique: la spécification CSS ne précise pas dans le détail comment doivent être dessinés les champs de formulaire, boutons radio, listes déroulantes, etc. Donc chaque navigateur fait ça comme il le sent (et de plus, pour les navigateurs multi-plateforme, ça change d'un OS à l'autre, voire en fonction du thème graphique utilisé par l'OS).

Thithi32 a écrit :
Et comment puis-je résoudre ce problème?

A peut pas.
Merci pour ta réponse.
C'est toujours mieux d'avoir une réponse comme ça que rien du tout.
Vive les formulaires!!!!
Salut Thithi32,

Ben en f ait, tu n'as pas vraiment décrit ton problème Smiley smile . Ok il y a quelques pixel de différence, mais si ton design est un temps soit peut flexible, tu dois pouvoir en tenir compte sans trop de difficulté non ?
Mon problème est simple, j'aimerai garantir que chaque ligne de mon formulaire fasse la même hauteur.
Sur cette page de test (http://v1.bio-scene.org/test/cg/alimenter.html) les champs à droite des zones images grises n'ont pas la même hauteur sur FF3 et sur IE7.
C'est un peu gênant si on veut faire une interface alignée (je travaille avec un designer tatillon).
Bonjour,

j'interviens des mois après car je viens de tomber sur ce topic suite à une recherche et je ne peux pas laisser Florent V. dire "Du fait que c'est comme ça et pas autrement" !

Effectivement il existe des différences entre le rendu des éléments HTML suivant les navigateurs, mais on peut faire en sorte de réinitialiser avec un reset.css.

Cf. : http://www.alsacreations.com/astuce/lire/36-reset-css.html