Largeur des "input" et "select" sous FireFox 3

Bonjour,

pour mon site, j'ai crée un formulaire qui contient des menus déroulants (select) et des champs de texte (input type="text").

Pour ces deux objets, j'applique la CSS toute simple :

width:298px;

Sous FireFox 2, pas de problème, les 2 objets ont la même dimension. Sous FireFox 3, les menus déroulants sont plus petits que les champs texte ! Ca me parait être un bug. Est-ce que vous connaissez un moyen pour régler ça car si l'on a plusieurs champs alignés, ça ne fait pas très propre.

Merci par avance.
Modifié par Julieng (17 Jul 2008 - 19:47)

Bonjour,

À lire au préalable: Comment ne pas styler les éléments de formulaire ?

Pour une même largeur (width), dans Firefox 3, les SELECT sont visiblement un peu plus court que les INPUT de type texte, effectivement. Je pense que c'est parce que la largeur visible du SELECT ne correspond pas tout à fait à sa largeur réelle. En effet, le rendu exact du SELECT dépendra du système d'exploitation, et du thème graphique utilisé avec ce système d'exploitation.

Autre piste: la présence de padding. Si tes input ont un padding de 5px à gauche et à droite, et une largeur de 200px, ils auront une largeur totale de 210px. Il faut alors donner une largeur de 210px à tes select, ou une largeur de 190px à test input...

Fait récemment:


C'est le rendu sous Firefox 3 sous Linux (Gnome, thème Human), mais on obtient un alignement correct avec la plupart des navigateurs. Ce n'est jamais (ou rarement) un alignement au pixel près, cependant. On voit sur cette image que les SELECT réservent un pixel à gauche et un pixel à droite, pour lesquels il n'y a pas de forme visible mais qui correspondent bien à l'étendue du select.
Modifié par Florent V. (17 Jul 2008 - 20:30)

Bonjour Florent V,

concernant le padding, je commence ma CSS par :

* {
  padding:0;
  margin:0;
}

Donc ça ne vient pas de cela.

J'utilise en effet Linux et FireFox 3 avec le thème par défaut (Human). Dommage que l'on ne puisse pas bien contrôler cette propriété.

Merci pour ta réponse.
Modifié par Julieng (17 Jul 2008 - 20:42)