[CSS] Wie behebe ich unterhalb des Formulars die unerwünschte Lücke im Textfluss?

Status
Nicht offen für weitere Antworten.
M

Maik

Wie behebe ich unterhalb des Formulars die unerwünschte Lücke im Textfluss?

Die Ausgangssituation: In einem DIV-Block mit Hintergrundfarbe wird ein Formular eingebunden.

Markup:

Code:
<div id="wrapper">
     <form action="">
           <input type="text" size="10"><input type="submit" value="submit">
     </form>
</div>

Stylesheet:

Code:
#wrapper {
width:600px;
margin:0 auto;
background:#efefef;
}
input {
margin:0 0 0 5px;
}
Das Ergebnis in den Browsern:

form_modern-browser.jpg (Firefox, Netscape, Opera, Safari, usw.)

form_ie.jpg (IE 6+7)

Lösung:

Den unteren Außenabstand des form-Elements auf null zurücksetzen:

Code:
form {
margin-bottom:0;
}
oder das Block-Element mit display:inline auszeichnen:

Code:
form {
display:inline;
}


mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück