Zone de texte Html inégale et largeur de liste déroulante avec XHTML 1.0 strict

J'essaie d'avoir deux entrées (une zone de texte, une liste déroulante) pour avoir la même largeur. Vous pouvez définir la largeur via css, mais pour une raison quelconque, la zone de sélection est toujours inférieure de quelques pixels. Il semble que cela se passe uniquement avec le xhtml 1.0 strict doctype Toutes les suggestions/idées sur la raison/contourner?Zone de texte Html inégale et largeur de liste déroulante avec XHTML 1.0 strict

Avoir le HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <style> 
     .searchInput{ 
      width: 1000px; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <form action="theAction" method="post" class="searchForm" > 
     <fieldset> 
      <legend>Search</legend>    
      <p> 
       <!--<label for="name">Product name</label>--> 
       <input class="searchInput" type="text" name="name" id="name" value="" /> 
      </p> 
      <p> 
       <!--<label for="ml2">Product Group</label>--> 
       <select class="searchInput" name="ml2" id="ml2"> 
        <option value="158">INDUSTRIAL PRIMERS/FILLERS</option> 
        <option value="168">CV CLEAR COATS</option> 
        <option value="171">CV PRIMERS/FILLERS</option> 
        <option value="" selected="selected">All</option> 
       </select> 
      </p> 
      <input type="submit" class="search" value="Show" name="Show" id="Show" /> 
      <input type="reset" value="Reset" name="reset" id="reset" class="reset"/> 
     </fieldset> 
    </form> 
</body 
</html>

Source

2008-10-02 Boris Callens

Ils rendent exactement la même largeur pour moi dans Firefox 2, quel navigateur utilisez-vous? –

Je l'ai remarqué moi-même, et serait intéressé par la réponse ... – japollock

En ce qui concerne les navigateurs: la plupart d'entre eux. –

Vous avez raison, il y a une différence de 4px. Le input sort à 103px de large, tandis que le select arrive à 99px de large. Je ne sais pas pourquoi cela se produit, mais vous pouvez travailler autour d'elle comme ceci:

<style type="text/css"> 
    .searchInput { 
     overflow: hidden; 
    } 
    select.searchInput { 
     width: 101px; 
    } 
    input.searchInput { 
     width: 97px; 
    } 
</style>

Il est vraiment tout à fait stupide, et je serais vraiment intéressé si quelqu'un savait pourquoi ce qui se passait, et un moyen de le prévenir.

La solution fonctionne sur Webkit et Firefox. La différence de pixels est différente dans IE. La chose amusante est, ils seraient normalement de la même taille en utilisant un doctype HTML.

Source

2008-10-02 12:08:37

J'ai eu ce problème dans Firefox 2, mais il semble être résolu dans Firefox 3 et IE7. Ma solution était d'ajouter les pixels manquants à une largeur séparée pour select.

Source

2008-10-02 12:09:59 Ross

-1

Il semble que seulement avec le doctype ajouté cela arrive. Correction de l'exemple.

Source

2008-10-02 12:27:16

Les navigateurs ont tendance à faire leur propre chose en ce qui concerne les éléments de forme et les styles. La norme CSS ne spécifie pas comment les navigateurs doivent afficher les widgets de formulaire, ni les propriétés CSS que les utilisateurs doivent modifier. Il varie entre les navigateurs, et entre les différents widgets de forme dans le même navigateur.

Vous pouvez essayer d'ajuster le rembourrage et les bordures pour aider les différents widgets de forme à correspondre.

Source

2008-10-02 13:31:54

D. Waite @ Paul - Vous avez d'accord avec vous il

Ce n'est pas ce que CSS est destiné. Regardez les boîtes de saisie dans Safari, par exemple. Ils sont elliptiques. Les propriétés CSS ne s'appliquent tout simplement pas dans certains cas.

Bloquez vos éléments pour les aligner.

Source

2008-10-02 16:21:49

Ce n'est pas parce que cela n'a pas été spécifié que CSS n'a pas été conçu pour les styliser. Même s'il y a des points valables contre le style de vos éléments pour des raisons de convivialité (les boutons semblent cohérents partout), je pense que la largeur et la hauteur sont des choses essentielles dans une mise en page et n'imposent aucune menace d'utilisabilité. –

Vous pouvez essayer de réinitialiser les marges, le rembourrage et les frontières pour voir si cela aide:

.searchInput { 
    margin:0; 
    padding:0; 
    border-width:1px; 
    width:1000px; 
}

Source

2008-10-03 14:58:33

J'ai essayé. Mais cela n'a pas fonctionné :( –

Cela semble être la bonne réponse Par défaut, une zone de texte a un remplissage et selon le [modèle de boîte] (http://www.w3.org/TR/CSS21/box .html) le padding est ajouté à la largeur d'un objet.Pour atteindre la même largeur, il faut soustraire le padding de la largeur du textarea. – jnns

Cela semble avoir quelque chose à voir avec le modèle de boîte. Plus précisément, cela semble avoir quelque chose à voir avec la frontière. Si vous utilisez firebug, consultez l'onglet de présentation ...

La sélection montre une bordure 2px, 0 padding et une largeur de 996px et une hauteur de 18px.
L'entrée affiche une bordure de 2px, un remplissage de 1px 0 et une largeur de 1000px et une hauteur de 16px. Si vous définissez la bordure à zéro (et leur donnez une couleur d'arrière-plan), vous pouvez voir qu'ils seront de la même taille, ce qui les affiche avec une largeur de 1000 pixels dans l'onglet de disposition.

.searchInput{ 
     width: 1000px; 
     border: 0; 
     background-color: #CCC; 
     overflow: hidden; 
    }

Source

2008-10-03 21:41:02 enobrev

Il est en raison de la e fait modèle de boîte qui #IE soutient quand il a trouvé dans le DOCTYPE « strict ». Si vous le changez en doctype "traditionnel" tout se comporte normalement ... mais pas normalement selon la norme CSS. Le modèle de boîte CSS indique que dans la largeur/hauteur d'un élément, le remplissage et la bordure ne sont pas inclus. Donc, ils sont supplémentaires au-dessus de la largeur mentionnée de l'élément, et sont donc plus grand que souhaité en fait.

Source

2009-02-21 13:48:49

Zone de texte Html inégale et largeur de liste déroulante avec XHTML 1.0 strict

Répondre

Questions connexes