Robin: unterschiedliche länge von select und input.text

Hallo,

Wenn ich über die css-eigenschaft "width" ein select und input.text -Feld mit dem gleichem selektor anspreche werden trotzdem zwei unterschiedliche Längen dargestellt im FF sowie im IE. Ich will erreichen das diese beiden Felder immer gleich gross sind und über einen Wert änderbar ist, GEHT das?

viele grüsse,
Robin.

  1. Hi Robin!

    Wenn ich über die css-eigenschaft "width" ein select und input.text -Feld mit dem gleichem selektor anspreche werden trotzdem zwei unterschiedliche Längen dargestellt im FF sowie im IE.

    Wo kann man das sehen?

    Ich will erreichen das diese beiden Felder immer gleich gross sind und über einen Wert änderbar ist, GEHT das?

    Ja.

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
    1. Hallo Hopsel.

      Wenn ich über die css-eigenschaft "width" ein select und input.text -Feld mit dem gleichem selektor anspreche werden trotzdem zwei unterschiedliche Längen dargestellt im FF sowie im IE.

      Wo kann man das sehen?

      Bei jedem beliebigen Testcode.
      Sprich: ich kann das Problem nachvollziehen, kenne aber keine Lösung.

      Ich will erreichen das diese beiden Felder immer gleich gross sind und über einen Wert änderbar ist, GEHT das?

      Ja.

      Da bin ich gespannt.

      Einen schönen Montag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      mathbr:del.icio.us/ mathbr:w00t/
      1. Hi Ashura!

        Ich will erreichen das diese beiden Felder immer gleich gross sind und über einen Wert änderbar ist, GEHT das?
        Ja.
        Da bin ich gespannt.

        input,select {  
        width:100px;  
        }  
          
        <form action="foo.php">  
        <input type="text" />  
        <select name="top5" size="3">  
           <option>Heino</option>  
           <option>Michael Jackson</option>  
           <option>Tom Waits</option>  
           <option>Nina Hagen</option>  
           <option>Marianne Rosenberg</option>  
        </select>  
        </form>
        

        Bringt in meinem Firefox das gewünschte Ergebnis.

        MfG H☼psel

        --
        "It's amazing I won. I was running against peace, prosperity, and incumbency."
        George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
        Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
        1. Bringt in meinem Firefox das gewünschte Ergebnis.

          Danke für deine Antwort. Das Problem liegt wie ich gerade rausgefunden habe am DOCTYPE, wenn ich den rausnehme dann sind diese beiden Eingabebereiche gleich lang.

          Sehr ärgerlich, ich wollte eigentlich mal doctypes verwenden, aber wenn sie einem so steine in den weg legen finde ich das schade - oder ich mache was falsch?

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <title></title>
           <style>
           <!--
            input,select {
             width:100px;
            }
           //-->
           </style>

          </head>

          <body>

          <div>
            <form action="foo.php">
            <input type="text" />
            <br />
            <select name="top5" size="3">
               <option>Heino</option>
               <option>Michael Jackson</option>
               <option>Tom Waits</option>
               <option>Nina Hagen</option>
               <option>Marianne Rosenberg</option>
            </select>
            </form>
           </div>

          </body>
          </html>

          1. Hallo Robin,

            Danke für deine Antwort. Das Problem liegt wie ich gerade rausgefunden habe am DOCTYPE, wenn ich den rausnehme dann sind diese beiden Eingabebereiche gleich lang.

            Also in den Quirksmode brauchst du nicht unbedingt zu schalten. Mit prozentualem Bezug von width auf in gleicher Spalte befindliche Tabellenzellen nehmen deine Formularelemente auch im standardkompatiblen Modus die gleiche Breite ein.

            Gruß Gernot

            1. Mit prozentualem Bezug von width auf in gleicher Spalte befindliche Tabellenzellen nehmen deine Formularelemente auch im standardkompatiblen Modus die gleiche Breite ein.

              prozentual gehts und dies stellt auch eine lösung für mein problem dar :).. hmm, trotzdem finde ich das merkwürdig das man mit absoluten angaben zu unterschiedlichen resultaten kommt.

              cya, Robin.

              1. hmm, trotzdem finde ich das merkwürdig das man mit absoluten angaben zu unterschiedlichen resultaten kommt.

                Ich mein is das absicht von diesem doctype oder ein bug (?) oder hab ich da nicht aufgepasst? das ist nicht mein erstes problem mit doctypes.

                cya, Robin.

                1. Hallo Robin.

                  Ich mein is das absicht von diesem doctype oder ein bug (?)

                  http://de.selfhtml.org/css/formate/box_modell.htm@title=Darüber lässt sich streiten.

                  Einen schönen Montag noch.

                  Gruß, Ashura

                  --
                  sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                  mathbr:del.icio.us/ mathbr:w00t/
        2. Hallo Hopsel.

          input,select {

          width:100px;
          }

            
          Du weißt doch sicher, was ich von px als Maßeinheit im Web halte, oder?  
            
          
          > Bringt in meinem Firefox das gewünschte Ergebnis.  
            
          Und bei em und %?  
            
            
          Einen schönen Montag noch.  
            
          Gruß, Ashura  
          
          -- 
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
          [<mathbr:del.icio.us/>](http://del.icio.us/mathbr) [<mathbr:w00t/>](http://w00t.noctus.net)
          
          1. Hi Ashura!

            Du weißt doch sicher, was ich von px als Maßeinheit im Web halte, oder?

            Mir geht es nicht anders.

            Bringt in meinem Firefox das gewünschte Ergebnis.
            Und bei em und %?

            Auch da. Allerdings habe ich, schludrig wie ich bin, den Doctype weggelassen. Wer konnte sowas auch ahnen!

            MfG H☼psel

            --
            "It's amazing I won. I was running against peace, prosperity, and incumbency."
            George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
            Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
        3. Hallo Hopsel.

          Bringt in meinem Firefox das gewünschte Ergebnis.

          Im Übrigen nicht einmal das.

          Weder Firefox noch Opera noch IE stellen meinen Versuch wie gewünscht dar.
          Lediglich Konqueror tut es.

          Einen schönen Montag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          mathbr:del.icio.us/ mathbr:w00t/
          1. Hallo Ahura,

            Weder Firefox noch Opera noch IE stellen meinen Versuch wie gewünscht dar.
            Lediglich Konqueror tut es.

            IE 5.5 übrigens auch.

            Schönen Abend noch,
             Martin

            --
            F: Was macht ein Offizier, der in der Nase bohrt?
            A: Er holt das Letzte aus sich heraus.
            1. Hallo Martin.

              Weder Firefox noch Opera noch IE stellen meinen Versuch wie gewünscht dar.
              Lediglich Konqueror tut es.

              IE 5.5 übrigens auch.

              Tatsache; IE 5.0 ebenfalls.

              Ob dies am Boxmodell liegt?

              Einen schönen Montag noch.

              Gruß, Ashura

              --
              sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
              mathbr:del.icio.us/ mathbr:w00t/
              1. Hallo.

                Ob dies am Boxmodell liegt?

                Das ist sehr wahrscheinlich.

                Versetze ich den IE 6.0 in den Quirksmodus, so stellt er beide Formularelement gleich breit (und damit wie seine Vorgängerversionen) dar.

                Einen schönen Montag noch.

                Gruß, Ashura

                --
                sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                mathbr:del.icio.us/ mathbr:w00t/
  2. Hallo Robin,

    Wenn ich über die css-eigenschaft "width" ein select und input.text -Feld mit dem gleichem selektor anspreche werden trotzdem zwei unterschiedliche Längen dargestellt im FF sowie im IE. Ich will erreichen das diese beiden Felder immer gleich gross sind und über einen Wert änderbar ist, GEHT das?

    Unterschiedliche Formularfelder bündig aneinander auszurichten ist ohne prozentualen Bezug auf ein Elternelement fast unmöglich. Ich behelfe mir dabei meist mit einer Layouttabelle und vepasse den bündig auszurichtenden Feldern je nach Padding der umgebenden Tabellenzellen einen Wert von knapp unter 100%.

    Gruß Gernot