Zeilenumbruch nach div-Container soll weg

[Igäl]

Abend Leute

Habe in der Suche leider nichts gefunden, aber wohl weil ich die falschen Stichwörter benutzt habe, denn ich denke das Problem wird bekannt sein.

Es geht um folgendes:

Folgender Codeblock gibt mir merkwürdigen Output:

<h1>Mitgliederdaten</h1>
<div id="formlabel">
Name:
Vorname:

</div>
<div id="formelements">
<input type="text">
<input type="text">
</div>

CSS-Relevantes dazu:

#formlabel 
{
	float: left;
	white-space: pre;
	width: 150px;
}
#formelements { white-space: pre; }

Wird soweit ganz gut dargestellt, ausser dass ich eine Leerzeile nach der Titelzeile Mitgliederdaten bekomme. Wie kriege ich diese weg?

Herzlichen Dank für das Befassen mit meinem Problem.

Gruss Igel

 

[Maik]

Hi,

h1 {
margin:0;
}

schliesst die Lücke im Textfluß.

Ansonsten empfiehlt sich zu Beginn des Stylesheets folgende Regel, um für alle im Dokument enthaltenden Elemente deren voreingestellten Polsterungseigenschaften zurückzusetzen:

* {
margin:0;
padding:0,
}

mfg Maik

 

[Igäl]

Hallo Maik

Danke für die Antwort. Dies habe ich jedoch bereits probiert und es schliesst die Lücke leider nur Teilweise. Ein Zeilenumbruch bleibt noch immer vorhanden. Es scheint effektiv an den Div-Containern zu liegen, denn wenn ich diese rausnehme, sind die Lücken verschwunden.

 

[Maik]

Der "Restabstand" zwischen den Inhalten des h1- und div-Elements ergibt sich durch die white-space: pre-Deklarationen.

Einfach mal zur visuellen Unterstützung der Überschrift und der nachfolgenden Box eine Hintergrundfarbe zuweisen, um die einzelnen Boxengrenzen zu erkennen. Zwischen ihnen paßt nämlich noch nicht mal ein Blatt Papier

mfg Maik

 

[Maik]

Hier mal ein fix zusammengeschusteter Lösungsvorschlag, um dem Problem Herr zu werden

* {
        margin:0;
        padding:0;
}
ul {
        list-style:none;
}
#formlabel {
        float: left;
        width: 150px;
}

<h1>Mitgliederdaten</h1>
<div id="formlabel">
     <ul>
         <li>Name:</li>
         <li>Vorname:</li>
     </ul>
</div>
<div id="formelements">
     <ul>
         <li><input type="text"></li>
         <li><input type="text"></li>
     </ul>
</div>

mfg Maik

 

[Igäl]

Ich hab die dinge mal soweit ich es möchte hinbekommen und bin auf ein neues Problem gestossen:

Im Firefox reihen sich meine Inputboxen vertikal aneinander und so bekomme ich sie auf die selbe Höhe, wie ihre Bezeichner. Im IE hingegen haben die Felder noch Abstände dazwischen, so dass die Bezeichner also nicht auf der selben Höhe liegen. Die könnte ich allerdings umgehen, wenn ich wüsste, wie ich eine CSS Anweisung nur vom Firefox interpretiert bekommen könnte. Geht das irgendwie, dass ich etwas so deklariere, dass die Anweisung vom IE/FF ignoriert wird?

 

[Maik]

Da hier der IE "Nachhilfe" benötigt, empfehle ich dir Alternative CSS-Dateien für den Internet Explorer (Conditional Comments), die ausschliesslich vom IE interpretiert werden.

mfg Maik

 

[Igäl]

Ok das ist sicher manchmal hilfreich D

Weisst du aber vielleicht zufällig, warum der Internet Explorer bei folgendem Code zwischen die Input-Felder 2 Pixel abstand reinbastelt und der FF nicht? Gibts vlt ne einfachere Lösung um das zu fixen als diejenige mit proprietären CSS-Dateien?

<h1>Mitgliederdaten</h1>
<div id="formlabel">
Name:<br />
Vorname:<br />
Strasse:<br />
PLZ & Ort:<br />
Telefonnummer:<br />
Natelnummer:<br />
E-Mail-Adresse:<br />
</div>
<div id="formelement">
<input type="text"><br />
<input type="text"><br />
<input type="text"><br />
<input type="text"><br />
<input type="text"><br />
<input type="text"><br />
<input type="text"><br />
</div>

#membertbl
{
	margin: 20px 300px 20px 20px;
}
#membertbl h1 
{
	font-size: 92%;
	background-color: #CCCCCC;
	margin: 0;
}
#membertbl h4 { font-size: 91%; }

#formlabel 
{
	float: left;
	width: 150px;
	line-height: 22px;
	background-color:#ff0000;
}

#formelement	{ line-height: 100px; background-color:#ffff00; }

 

[Maik]

Gibts vlt ne einfachere Lösung um das zu fixen als diejenige mit proprietären CSS-Dateien?

Da du das (X)HTML-Dokument den Browsern im proprietären Darstellungsmodi "Quirksmode" übergibst, dürften die "Conditional Comments" gerade noch gut genug dafür sein. Dabei liegt ihr Vorteil klar auf der Hand: Wenn nötig, und das kommt in der Praxis oft vor, kann zwischen den einzelnen IE-Versionen differenziert werden, wenn z.B. der IE7 alles wie gewünscht interpretiert, und der IE6 sich damit dumm anstellt.

Anbei eine Screenshot-Galerie der drei Browser FF, Opera & Safari, wie sich dein Konstrukt in ihnen darstellt, wenn sie standardkonform laufen.

Deinen aktuellen Codeschnipsel hab ich eben in meine Testseite eingefügt, in der standardmäßig dieser Doctype deklariert ist:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

... und das kommt dann dabei raus:


(vlnr: FF 3, Opera 9.6, Safari 3.1.2 - OS: WinXP)

Wenn dir die "Coditional Comments" nicht zusagen, steht dir für den IE u.a. auch der Star-HTML-Hack zur Verfügung. - dieser wird vom IE7 nur dann ignoriert, wenn er im "Standardmodus" läuft.

Ansonsten empfehle ich dir unsere Link-DB bzgl. Filter, Hacks, Browserweichen, um dich nach weiteren Möglichkeiten umzuschauen.

mfg Maik