✔ margin-top korrespondiert nicht mit übergeordnetem Element [Firefox]

Status
Nicht offen für weitere Antworten.
C

Chosi

Mitglied
Hi Zusammen,

ich habe derzeit ein Problem mit margin-top im Firefox(2.0.0.14). Genauer habe ich zwei verschachtelte Blockelemente (div). Das Innere der beiden möchte ich nun via margin-left und margin-top ein wenig verschieben. Klappt im IE soweit wunderbar, unter Firefox bleibt das Element jedoch am oberen Rand hängen, bzw. verschiebt bei größeren Werten sogar das Elternelement nach unten (margin-top scheint in diesem Falle auf der übergeordnete Elternelement zu wirken)

Hier mal mein vereinfachter Code:
HTML: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>CSS Test</title>

<style type="text/css">
<!--
body
{
  background-color: #EFEFEF;

  margin: 20px;
  border: 0px;
  padding: 0px;
}

div.head
{
  display: block;

  width: 750px;
  height: 160px;

  margin: 0px;
  border: 0px;
  padding: 0px;

  background-color: limegreen;
}

div.nav
{
  display: block;

  width: 400px;
  height: 50px;

  margin-top: 20px;
  margin-left: 20px;

  background-color: green;
}
-->
</style>

  </head>
  <body>
    <div class="head">
      <div class="nav"></div>
    </div>
  </body>
</html>

Hat vielleicht jemand eine Idee, woran das liegen könnte?
 
Hi,

positionier das Element relativ:

Code: 
div.nav
{
  display: block;

  width: 400px;
  height: 50px;

  position:relative;

  top: 20px;
  margin-left: 20px;

  background-color: green;
}
Ansonsten müsste das Elternelement .head absolut positioniert werden, damit darin die margin-top-Deklaration in den standardkonformen Browsern (Firefox, Mozilla, Netscape, Opera, Safari, usw.) greift:

Code: 
div.head
{
  display: block;

  width: 750px;
  height: 160px;

  position:absolute;

  margin: 0px;
  border: 0px;
  padding: 0px;

  background-color: limegreen;
}

mfg Maik
 
So geht's natürlich auch, danke :)

Ich greife immer ungern auf relative/absolute Positionierung zurück, wenn's eigentlich auch das Boxmodel tun sollte. Ist dieses Verhalten wirklich standardkonform? Ich ging jetzt ehrlich gesagt von einem Fehlverhalten aus ;)
Nun gut, ich setze auf Deine 1. Variante.
 
Eines der beiden Elemente muß in diesem Fall aus dem normalen Textfluss genommen werden, damit für das Nachfahreelement ein oberer Außenabstand bzw. eine Positionsangabe von oben festgelegt werden kann.

mfg Maik
 
Gut, wieder was gelernt.

Merkwürdig ist jedoch, dass das Ganze auch so funktioniert, sobald um das Elternelement ein Rahmen gezogen wird:

HTML: 
div.head
{
  display: block;

  width: 750px;
  height: 160px;

  margin: 0px;
  border: 1px solid black;
  padding: 0px;

  background-color: limegreen;
}
 
Ah, okay, jetzt ist's klar. :) Das wurde auf css4u.de leider in keinem Wort erwählt.
Dein Link ist als neue Referenz gebookmarkt ;)

Danke & Gruß
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück