[CSS] h1 verschwindet wenn div eine Hintergrundfarbe bekommt

[Quetschi]

Hallo,

mal wieder ne seltsame Sache von mir - folgender html-code:

<form id="kontakt" method="post" action="index.php">
        <div id="allgemein">
          <h1>Allgemeine Angaben</h1>
          <p>Name des Betriebs*<input type="text" name="send_Haus_Name"/></p>
          <p>Vorname - Nachname*<input type="text" name="send_Name_Vorname"/></p>

          <p>Stra&#xDF;e &amp; Hausnummer*<input type="text" name="send_Str_Hausnr"/></p>
          <p>Land - PLZ - Wohnort*<input type="text" name="send_Ort"/></p>
          <p>Homepage (ohne [url]http://[/url])*<input type="text" name="send_Url"/></p>
          <p>eMail-Adresse*<input type="text" name="send_eMail"/></p>
          <p>Telefon*<input type="text" name="send_Telefon"/></p>

          <p>Telefax<input type="text" name="send_Telefax"/></p>
        </div>
.
.
.
</form>

Im CSS ist für body generell #fff als Hintergrundfarbe und #000 als Textfarbe definiert.

Sobald ich nun für den div mit der id 'allgemein' eine Hintergrundfarbe definiere, wird die h1 im IE 'unsichtbar' und erscheint erst, wenn man mit der Maus an der Stelle den Text markiert (visibility:hidden oder ähnliche Sachen werden im CSS nicht verwendet). Opera und Firefox machen keine Probleme.

Selbst wenn ich die Textfarbe für die h1 nochmal im CSS neu definiere bleibt das so - nehm ich die Hintergrundfarbe aus dem div raus, ist h1 auch wieder sichtbar.

html und css sind validiert.

Gruss
Quetschi

[Kropff]

dann zeig uns doch mal deine css-anweisungen

peter

[Quetschi]

body 
{
	margin:0px auto;
	padding:0px;
	text-align:center;
	background-color: #FFFFFF;
	color:#000000;
}

form
{
	padding:0px;
	margin:0px;
}

#allgemein
{
	margin:10px 0px 0px 0px;
	padding:0px;
	background-color:#eee;
	color:#000;
}

h1, #allgemein h1
{
	padding:0px;
	margin:0px 0px 2px 0px;
	clear:both;
	color:#000;
	background-color:#ddd;
	font-size: 100%;
}

Sobald ich bei #allgemein die Hintergrundfarbe rausnehme, zeigt der IE die Überschrift wieder an - nehm ich sie rein, wird die Überschrift unsichtbar, nimmt aber immer noch den Platz ein.

[Kropff]

Sobald ich bei #allgemein die Hintergrundfarbe rausnehme, zeigt der IE die Überschrift wieder an - nehm ich sie rein, wird die Überschrift unsichtbar, nimmt aber immer noch den Platz ein.

also bei mir nicht, da sieht alles normal aus.

peter

[Quetschi]

Unfassbar, dachte erst das macht nur mein Browser, hab's jetzt aber auch auf zwei weiteren Rechnern geprüft, immer das gleiche - auch dann, wenn ich den Code und Css auf das reduziere, was ich hier gepostet hab.

[Kropff]

was soll eigentlich diese anweisung?

h1, #allgemein h1 

du definierst etwas für ALLE überschriften und dann nochmal für überschriften innerhalb von #allgemein. da reicht ein h1 doch völlig aus.

peter

[Quetschi]

Das kam erst dazu, als ich gemerkt hab dass die Überschrift verschwindet, da ich dachte, dass ich evtl. die Textfarbe usw. innerhalb des 'allgemein'-div nochmal erneut definieren müsste - war aber auch keine Lösung.

[Kropff]

welcher ie denn überhaupt wenn 6.0, dann bin ich mit meinem latein am ende.

und jetzt sag bloß nicht ie für mac ;-)

peter

[Quetschi]

6.0 auf XP SP 2

aber jetzt seh ich grad, dass ich beim CSS-code was nicht mit hierherkopiert hab, was aber scheinbar ursächlich ist:

#allgemein p
{
	padding:0px;
	margin:2px 0px 0px 0px;
	font-weight:bold;
	float:left;
}

Das Problem ist, dass ich den p scheinbar nicht floaten lassen darf (dadurch wollt ich erreichen, dass sich die Elemente 2-spaltig ausrichten) - sobald hier aber ein Element in die nächste Zeile umbricht, verschwindet die Überschrift.
Aber irgendwie weiß ich grad nicht, wie ich sonst das 2-spaltige hinkriegen soll.

[wahsaga]

Könnte das evtl. Peekaboo sein ...?

[Quetschi]

@wahsaga

Volltreffer, Danke