• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Abstände in <form>

Status
Für weitere Antworten geschlossen.
G

Gelöschtes Mitglied 3007

Guest
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

Code:
* {
    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. :)
 
Werbung:
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:
Code:
#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
 
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 ^^
 
Werbung:
Ich würde die Sichtbaren inputs in eine <ul> stecken und den <li> die Border geben.
Code:
 <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:
Code:
.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.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.
Zurück
Oben