Firefox stellt margin-top falsch darf

[Benny]

Moin,

ich habe folgendes Problem:

Ich bastel gerade an einem Header rum und möchte in meinem Div eine Hintergrundgrafik einfügen. Soweit kein Problem. Zusätzlich möchte ich per HTML/CSS eine Schriftzug oder ähnliches drüberlegen. Dies könnte ich per Grafik machen, möchte ich abernicht :D Ich füge also ein <p> mit entsprechendem Text ein. Doch ich möchte den Text natürlich nicht direkt oben links haben, sondern möchte ihn per margin (-top) vom oberen Rand wegbekommen. Da ich aber für den Div eine height-angabe gemacht habe, versaut der Firefox im den margin bzw stellt den margin gar nicht erst da. Im IE läufts korrekt. Ich poste am besten mal den Quelli....hab die Styles sonst in ner styledatei, aber habs jetzt mal aufs wesentliche gekürzt und direkt im html mit drin:

<!-- Header -->
  <div style="height: 200px; background-image:url(pic/header.jpg); background-repeat:no-repeat;">
  <p style="margin: 30px 0 0 0;"> Test 1234 Test</p>
  </div>
  <!-- Ende Header -->

Der Firefox zieht den ganzen Div auf diese 30px Position herunter...
Wenn ich die height angabe weglasse, dann funktioniert es prima, allerdings habe ich dann kein Background mehr bzw nursoviel, wie ich text habe und da es eine headergrafik ist, sollte diese ja auch komplett dargestellt werden. Hoffe mir kann jemand helfen :)

[Struppi]

<!-- Header -->
  <div style="height: 200px; background-image:url(pic/header.jpg); background-repeat:no-repeat;">
  <p style="margin: 30px 0 0 0;"> Test 1234 Test</p>
  </div>
  <!-- Ende Header -->

Der Firefox zieht den ganzen Div auf diese 30px Position herunter...

Wie meinst du das?
Bei mir macht dein Code genau das was ich erwarten würde, einen 30px hohen Abstand oberhalb.

Struppi.

[wahsaga]

hi,

Im IE läufts korrekt.

Irrtum.

<div style="height: 200px; background-image:url(pic/header.jpg); background-repeat:no-repeat;">
  <p style="margin: 30px 0 0 0;"> Test 1234 Test</p>

Der Firefox zieht den ganzen Div auf diese 30px Position herunter...

Muss er ja auch - schliesslich ist genau dieses Verhalten in der CSS-Spezifikation definiert, Stichwort: Collapsing Margins.

Wenn ich die height angabe weglasse, dann funktioniert es prima, allerdings habe ich dann kein Background mehr bzw nursoviel, wie ich text habe

Natürlich, weil dann der Div ja nur noch so hoch wird, wie es sein Inhalt, der Absatz, verlangt.

Hoffe mir kann jemand helfen :)

Weg mit dem Div, padding-top und Hintergrundbild für P.

gruß,
wahsaga