Abstände in <form>

[Gelöschtes Mitglied 3007]

Also kommen wa mal gleich zur Sache. :)

Homepage: bla

Wenn man in das Feld in dem im Moment "Pseudonym" steht etwas eingibt ändert sich die Hintergrundfarbe in Rot damit man besser sehen kann wo die Blöden Abstände sind die ich gerne entfernen möchte. Also der eine Pixel überhalb des INPUT Tags.

Die entsprechenden Formatierungen sind

* {
    margin: 0px;
    padding: 0px;
    text-align: left;
}

.iBox {
    text-align: center;
    border: 2px solid #40BEFF;
    margin: 8px 0px;
}

#login input {
    border: 0px;
    border-right: 2px solid #40BEFF;
    padding-left: 3px;
    text-align: center;
    background-color: white;
    width: 150px;
    height: 18px;
}

.iBox ist der DIV der die Form umgibt und #login ist die Form.

Wenn mich da eventuell jemand aufklären könnte währe ich sehr dankbar. :)

 

[littleHtml Freak]

ziemlich banal aber:
deine schrift ist zu groß bzw. deine "tabelle"(ist ja keine) ist zu niedrig
du musst die höhe im css vergrößern.
sprich:

#login input {
    border: 0px;
    border-right: 2px solid #40BEFF;
    padding-left: 3px;
    text-align: center;
    background-color: white;
    width: 150px;
    height: 19px;
}

(habs ausprobiert bei mir im localhost funkts)
mfg

 

[Gelöschtes Mitglied 3007]

geht leider nicht... mehr kann ich da auch nicht zu sagen ^^

die beiden eingabefelder haben immer so c.a. 1px abstand nach oben und der button 1px abstand nach unten.

Im IE siehts zwar schöner aus da ist aber über und unter den input feldern immer 1px frei ^^

 

[neuroleptika]

Ich würde die Sichtbaren inputs in eine <ul> stecken und den <li> die Border geben.

 <div id="user" class="iBox">
<form id="login" action="actions.php" method="post">
 <input name="act" type="hidden" value="login" />
  <ul>
   <li>
   <input id="uname" name="uname" type="text" value="Pseudonym" />
   </li>
   <li>
   <input id="pwd" name="pwd" type="password" value="Passwort" />
   </li>
   <li>
   <input id="einloggen" name="login" type="submit" value="Einloggen" />
   </li>
  </ul>
</form>
</div>

css:

.iBox {
    text-align: center;
    border: 2px solid #40BEFF;
    margin: 8px 0px;
}

.iBox ul {
list-style: none;
}

.iBox ul:after { /* clear Gecko, Opera9, Safari, konqueror */
    content: ".";
    display: inline;
    height: 0;
    clear: both;
    visibility: hidden;
}

* +html .iBox ul { /*clear IE 7 */
min-height: 1%;
}

* html .iBox ul { /*clear IE 5-6 */
height: 1%;
}


.iBox ul li {
    list-style: none;
    float: left;
    border-right: 2px solid #40BEFF;
}


#login input {
    border: 0px;
    padding-left: 3px;
    text-align: center;
    background-color: white;
    width: 150px;
}

Im Firefox 2.0 (Linux) überdeckt das input type="submit" den unteren Border noch um 1px. Nach einfacher Schriftvergrößerung verschwindet der Fehler wieder. Unter Windows tritt der Fehler nicht auf.

Warum das so ist, weiß ich nicht. Im Opera9, Internet Explorer 6 und 7,
Safari 3.1 (win) stimmen die Border.

 

[neuroleptika]

.
sprich:

#login input {
    ...
    height: 19px;
}

(habs ausprobiert bei mir im localhost funkts)
mfg

Input in Pixelhöhen zwängen ist Gift für Formulare.
Das es bei dir funktioniert ist Zufall. Die Schriftgröße für body ist in em angegeben.