Dieter Raber: Selectboxen kleiner als Inputfelder

Hallo,

ich habe in Formularen immer das Problem, dass Selectboxen bei gleicher Weitenangabe immer etwas kleiner sind als Inputfelder. Ich benutze kein Reset fuer padding/margin, Doctype ist XHTML 1.0 Transitional, Browser FF 2-3, IE 7, WinXP.

  
input, select {  
  border: 1px #ccc solid;  
  font : inherit;  
  width: 280px;  
  padding: 1px 3px;  
}  

Weiss jemand, warum das so ist und ob man dem entgegenwirken kann, ohne jedem Element einen eigenen Style zu geben?

Gruss

Dieter

  1. Weiss jemand, warum das so ist und ob man dem entgegenwirken kann, ohne jedem Element einen eigenen Style zu geben?

    nein - du bist bei formular-elementen darauf angewiesen, wie der browser sie rendert - hast du dir die dinger schon mal im safari angesehen (achtung, herztabeletten bereitstellen :D)

    die einzige möglichkeit, die dinger "schön" hinzubekommen, ist sie mit html, css und javascript nachzubauen :)

    1. Hi suit

      nein - du bist bei formular-elementen darauf angewiesen, wie der browser sie rendert - hast du dir die dinger schon mal im safari angesehen (achtung, herztabeletten bereitstellen :D)

      Klar, abgesehen von der Mac-artigen Selectbox ist das Problem das gleiche, in Opera uebrigens auch.

      die einzige möglichkeit, die dinger "schön" hinzubekommen, ist sie mit html, css und javascript nachzubauen :)

      Es ist nicht so, dass mir zu langweilig waere ;-)

      Dieter

  2. Hi,

    font : inherit;

    dies dürfte Dein Problem ausmachen. Abgesehen davon, dass der IE inherit nicht umsetzt, könnte dieser Wert auch bei anderen Browsern allgemein für font nicht wie gewünscht funktionieren. Vergleiche besonders die Schriftart in den Feldern.

    freundliche Grüße
    Ingo

    1. Hi Ingo

      ich habe das Szenario testweise so umgebaut:

        
      input {  
        border: 1px #ccc solid;  
        font : 11px arial;  
        width: 280px;  
        padding: 1px 3px;  
      }  
        
      select {  
        border: 1px #ccc solid;  
        padding: 0;  
        width: 280px;  
      }  
        
      option {  
        font : 11px arial;  
        padding: 1px 5px;  
      }
      

      Zudem habe ich verschiedene Varianten ohne option getestet, bei denen select die Fontgroesse bekommt. Im grossen und ganzen bleibt das Problem aber bestehen.

      Gruss

      Dieter

  3. Hi,

    ich habe in Formularen immer das Problem, dass Selectboxen bei gleicher Weitenangabe immer etwas kleiner sind als Inputfelder. [...]
    Weiss jemand, [...] ob man dem entgegenwirken kann, ohne jedem Element einen eigenen Style zu geben?

    In Containerelemente verschachteln (bspw. label), denen die gewuenschte (Pixel-)Breite geben - und dann input und select nur noch 100% Breite verpassen ...?

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“