Andi: Firefox interpretiert margin nicht

Hallo,

zu meinem Problem.
Ich habe folgenden HTML-Code:

<div style='float:left;width:49%'>hier stehen texte bilder usw.</div>
<div style='float:right;width:49%'>hier stehen texte bilder usw.</div>
<div style='clear:both;margin-top:10px;'>Hier stehe dann wieder sachen</div>

Im Opera und IE schaut alles so aus, wie es sollte nur der Mozilla stellt es nicht dar. Er interpretiert den Margin nicht.

Kann mir jemand weiterhelfen oder einen Hinweis geben?

Gruß
Andi

  1. Hallo Andi,

    <div style='float:left;width:49%'>hier stehen texte bilder usw.</div>
    <div style='float:right;width:49%'>hier stehen texte bilder usw.</div>
    <div style='clear:both;margin-top:10px;'>Hier stehe dann wieder sachen</div>

    Im Opera und IE schaut alles so aus, wie es sollte nur der Mozilla stellt es nicht dar. Er interpretiert den Margin nicht.

    Er interpretiert es schon, bezieht es aber nicht auf die floatenden Elemente:

    <hr>
    <div style='float:left;width:49%'>hier stehen texte bilder usw.</div>
    <div style='float:right;width:49%'>hier stehen texte bilder usw.</div>
    <div style='clear:both;margin-top:50px;'>Hier stehe dann wieder sachen</div>

    Grüsse

    Cyx23

    1. Hallo Cyx23,

      <div style='float:left;width:49%'>hier stehen texte bilder usw.</div>
      <div style='float:right;width:49%'>hier stehen texte bilder usw.</div>
      <div style='clear:both;margin-top:10px;'>Hier stehe dann wieder sachen</div>

      Im Opera und IE schaut alles so aus, wie es sollte nur der Mozilla stellt es nicht dar. Er interpretiert den Margin nicht.

      Er interpretiert es schon, bezieht es aber nicht auf die floatenden Elemente:

      Wie kann ich ihm dann mitteilen, dass er es auf die floatenden Elemente beziehen soll? Oder gibt es ein Workaround, dass ich darunter eine Abstand von 10 px haben kann?

      Gruß
      Andi

      1. hi,

        Oder gibt es ein Workaround, dass ich darunter eine Abstand von 10 px haben kann?

        Wie sieht's mit einem margin-bottom von 10px für die gefloateten Elemente aus?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hallo wahsaga

          Oder gibt es ein Workaround, dass ich darunter eine Abstand von 10 px haben kann?

          Wie sieht's mit einem margin-bottom von 10px für die gefloateten Elemente aus?

          Das werde ich morgen probieren ich glaube das führt zum Ziel.

          Gruß
          Andi

      2. Hallo Andi,

        Wie kann ich ihm dann mitteilen, dass er es auf die floatenden Elemente beziehen soll? Oder gibt es ein Workaround, dass ich darunter eine Abstand von 10 px haben kann?

        wenn du das Div selbst auch floatest sollte es klappen: clear:both;float:left;margin-top:10px;
        Ähnlich vielleicht auch mit einem Container-Div für die ersten Divs möglich.

        Grüsse

        Cyx23

        1. Hallo Cyx23,

          Wie kann ich ihm dann mitteilen, dass er es auf die floatenden Elemente beziehen soll? Oder gibt es ein Workaround, dass ich darunter eine Abstand von 10 px haben kann?

          wenn du das Div selbst auch floatest sollte es klappen: clear:both;float:left;margin-top:10px;
          Ähnlich vielleicht auch mit einem Container-Div für die ersten Divs möglich.

          Wenn ich ein Container-Div einfüge und bleibt das Problem das gleiche. Was mach ich falsch?

          Grüße
          Andi

          1. Hallo,

            Wenn ich ein Container-Div einfüge und bleibt das Problem das gleiche. Was mach ich falsch?

            vielleicht hilft es wenn du ein <br style="clear:both"> noch in den Container reinnimmst.
            Nur für den IE (also ggf. CSS-Weiche) kannst du wohl auch das zweite Element im Container
            mit clear:both versorgen.

            Grüsse

            Cyx23

  2. Hallo Andi.

    zu meinem Problem.
    Ich habe folgenden HTML-Code:

    <div style='float:left;width:49%'>hier stehen texte bilder usw.</div>
    <div style='float:right;width:49%'>hier stehen texte bilder usw.</div>
    <div style='clear:both;margin-top:10px;'>Hier stehe dann wieder sachen</div>

    Die Inlinestyles sind hier hoffentlich nur zur Veranschaulichung.

    Im Opera und IE schaut alles so aus, wie es sollte

    Kann ich nicht bestätigen, Im Opera werden keine Abstände eingefügt.
    Setze einmal die Abstände für alle Elemente auf 0 und füge Rahmen ein, damit du siehst, wo Rahmen gesetzt werden.

    nur der Mozilla stellt es nicht dar. Er interpretiert den Margin nicht.

    Korrekt, er folgt der Spezifikation, welche besagt: „Margin properties ... apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.“

    Das div-Element ist im Stylesheet standardmäßig ein Blockelement; zu einem Replaced-Inline-Element kann es nicht gemacht werden.

    Einen schönen Donnerstag noch.

    Gruß, Ashura

    1. Hi,

      er folgt der Spezifikation, welche besagt: „Margin properties ... apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.“

      Das div-Element ist im Stylesheet standardmäßig ein Blockelement; zu einem Replaced-Inline-Element kann es nicht gemacht werden.

      Seltsame Idee von Dir. Bist Du der Meinung, daß vertikale margins nicht auf Block-Elemente zutreffen?

      freundliche Grüße
      Ingo

    2. hi,

      Korrekt, er folgt der Spezifikation, welche besagt: „Margin properties ... apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.“

      Das div-Element ist im Stylesheet standardmäßig ein Blockelement; zu einem Replaced-Inline-Element kann es nicht gemacht werden.

      Will ja auch keiner - Block ist _nicht_ non-replaced inline, also werden vertikale margins hier sehr wohl angewandt.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      1. Hallo wahsaga.

        Das div-Element ist im Stylesheet standardmäßig ein Blockelement; zu einem Replaced-Inline-Element kann es nicht gemacht werden.

        Will ja auch keiner - Block ist _nicht_ non-replaced inline, also werden vertikale margins hier sehr wohl angewandt.

        Ja, mein (Verständnis)fehler.

        Einen schönen Donnerstag noch.

        Gruß, Ashura