✔ Input Field und Input Submit gleiche Breite geben?

[Teilzeitphilosoph]

Moinz.
Ich blamier mich gewiss mit der Frage aber warum haben mein Input Field und mein Input Submit trotz 100% Breite einen Unterschied?

...
<STYLE TYPE="text/css">
<!--
  div.suche input { width:100%; }
// -->
</STYLE>
...
...
<div class="suche">
    <hr/>
    Erste Testeingabe:
    <input value="Ich bin der erste Test"><br/><br/>
    Zweite Testeingabe:<br/>
    <input value="Ich bin der zweite Test"><br/><br/>
    <hr/>
    <input type="submit" value="ab dafür!">
  </div>
...
...

Das HR und der Button sind genau gleich lang...nur das input field schießt rechts etwas über....so 8-10px. Hab ich was verpasst?

-bedank-
TZP

 

[Maik]

Hi,

das wird an dem Rahmen des Eingabefeldes liegen, der gemäß des "Box-Modells" zur width-Regel hinzuaddiert wird.

mfg Maik

 

[Teilzeitphilosoph]

Dratz...lässt sich da was dynamisches machen oder muss man-n damit leben?

 

[Maik]

Mit diesen Regelerweiterungen werden beide <input>-Elementtypen gleich breit dargestellt:

div.suche input { width:100%; border:none;  padding:0; }

Sichtbar wird's dann mit einem Hintergrund:

background:#eee;

Was verstehst du unter Dynamik?

Ohne Angabe dieser zusätzlichen CSS-Regeln mußt du mit dem Unterschied leben.

Du kannst natürlich auch diese Regel zu Beginn des Stylesheets notieren:

* {
margin:0;
padding:0;
border:none;
}

mfg Maik

 

[Teilzeitphilosoph]

Der Rand muss leider dabei sein. Schätze, ich werde das field von Hand ein paar Prozente kleiner machen müssen. Aber dennoch meinen Dank soweit.

TZP

 

[Maik]

Der Rand muss leider dabei sein. Schätze, ich werde das field von Hand ein paar Prozente kleiner machen müssen.

Na, dann wünsch' ich dir viel Glück, diesen prozentualen Dezimalwert richtig zu treffen, und dass er von allen Browsern "rechnerisch" wie gewünscht übereinstimmend interpretiert wird ;-)

mfg Maik