Form Input pixelgenau stellen

[Darius]

Hallo,

nach langer Suche und brenneden Nerven brauch ich nun eure Hilfe ;)

Ich habe eine Tabellenzelle, die genau 18px hoch ist.
Also soetwas... (stark vereinfacht)

<table><tr hight="18"><td>...</td></tr></table>

Nun brauch ich 2 Input Felder nebeneinander... die die Größe der Zeile nicht sprengen sollten.

Bin nun soweit...

Die CSS Einstellungen:

form {
   display: inline;
                         margin: 0px;
                         float: none;
                         }

input#a1 {
                  height: 15px;
                  width : 87px;
                         border: 0px;
                         background-image: url(imag/nick.jpg);
                         font-size:9px;
                         font-family:Arial;
                         color:#6f727a;
                         margin:0px;
                         float: none;
                         }
                 input#a2 {
                  height: 15px;
                  width : 87px;
                         border: none;
                         background-image: url(imag/password.jpg);
                         font-size:9px;
                         font-family:Arial;
                         color:#6f727a;
                         margin:0px;
                         }

Und die Tabelle:

<table><tr hight="18" valign="middle"><td>

<form><input id="a1" type="text" name="user"  value=" Loginname">&nbsp;<input id="a2" type="text" name="user"  value=" ******"></form>

</td></tr></table>

Warum passen die 15px hohen Felder nicht in die 18px Zelle? Ich hab Border auf 0 gesetzt... margin auf 0 gesetzt... display auf inline gesetzt... und nun weiß ich auch nicht mehr weiter.

Wie bekomm ich die Felder in die Zelle, dass die nicht in der Höhe gesprengt wird?

Danke für eure Hilfe
Gruß Darius

[MudGuard]

Hi,

<table><tr hight="18"><td>...</td></tr></table>

ein hight-Attribut gibt es in HTML nicht.

form {
   display: inline;
                         margin: 0px;
                         float: none;
                         }

Größe des padding ist also dem Browser überlassen.

input#a1 {
                  height: 15px;
                  width : 87px;
                         border: 0px;
                         background-image: url(imag/nick.jpg);
                         font-size:9px;
                         font-family:Arial;
                         color:#6f727a;
                         margin:0px;
                         float: none;
                         }

Größe des padding ist also dem Browser überlassen.

input#a2 {
                  height: 15px;
                  width : 87px;
                         border: none;
                         background-image: url(imag/password.jpg);
                         font-size:9px;
                         font-family:Arial;
                         color:#6f727a;
                         margin:0px;
                         }

Größe des padding ist also dem Browser überlassen.

Und die Tabelle:
<table><tr hight="18" valign="middle"><td>

ein hight-Attribut gibt es in HTML nicht.

<form><input id="a1" type="text" name="user"  value=" Loginname">&nbsp;<input id="a2" type="text" name="user"  value=" ******"></form>

line-height und font-size (für das &nbsp;) sind nicht definiert.

</td></tr></table>

Welchen Zweck hat die einzellige Tabelle?

Warum passen die 15px hohen Felder nicht in die 18px Zelle? Ich hab Border auf 0 gesetzt... margin auf 0 gesetzt...

padding _nicht_ auf 0 gesetzt, font-size und line-height für das &nbsp; nicht definiert,

display auf inline gesetzt... und nun weiß ich auch nicht mehr weiter.

cu,
Andreas