Antworten auf deine Fragen:
Neues Thema erstellen

margin-top und FF

xxsiv

Creative Director

Im grünen div="wrapper" befindet sich der weiße div="main" welchem ich per css ein margin von 20px mitgebe. Für oben wird dieser Wert aber im Firefox komplett ignoriert, main hat keinen 20px abstand von der wrapper-Oberkannte. Im IE schon.

Was ist hier los?




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

<head>
<title>tr</title>
<style type="text/css">
body {
    background: #020202;
    color: #f7dda3;
}
#wrapper {
    height: 100px;
    background-color: green;
}
#main {
    background-color: white;
    margin: 20px;
}
</style>

</head>
<body>
<div id="wrapper">
    <div id="main">
        hurz
    </div>
</div>
</body>
</html>
 

leohh

CSS verliebt

AW: margin-top und FF

Auf die Schnelle kann ich es jetzt nicht nachvollziehen, mir fallen die Augen zu.
Gib doch einfach deinem Wrapper ein padding: 20px 0 0;
Doch auch eine absolute Positionierung wuerde dir helfen, dafuer muesstest du nur in deinem wrapper ein position: relative setzen, als orientierung am wrapper und nicht am Wurzelemenent.
 
Zuletzt bearbeitet:
AW: margin-top und FF

bei mir ging es,




man muss noch die Breite definieren

oder so wie leohh es vorschlägt
 
Zuletzt bearbeitet:

xxsiv

Creative Director

AW: margin-top und FF

Ich habe es mit padding umgesetzt. Mich würde aber trotzdem interessieren, warum margin-top ignoriert wird.
 

Emporia

Nicht mehr ganz neu hier

AW: margin-top und FF

@lucy_lawless: Du meinst sicherlich die collapsing margins. Das passiert, wenn ein margin-bottom und ein margin-top aufeinandertreffen.

Ich habe es jetzt kurz ausprobiert (hab leider jetzt zu wenig Zeit - und auf die Schnelle ist es nicht gegangen), ... also, wie gesagt: Auf die Schnelle ... ??? ...

Das Blöde vor allem ist, dass ich mich auf die Darstellung von Firefox mehr verlasse als auf die vom IE :rolleyes:. In einer ruhigen Minute werde ich mich damit mal "spielen".
 

lucy_lawless

XHTML/CSS Fetischistin

AW: margin-top und FF

@lucy_lawless: Du meinst sicherlich die collapsing margins. Das passiert, wenn ein margin-bottom und ein margin-top aufeinandertreffen.

ja, ist mir schon klar - deshalb ja meine frage, ob das problem hier darauf zurückgehen könnte...

"collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin." (aus der spezifikation)

scheint mir hier der fall zu sein...
 
Zuletzt bearbeitet:

lucy_lawless

XHTML/CSS Fetischistin

AW: margin-top und FF

Kann ich mir nicht vorstellen, denn mir fehlt dazu der andere margin.

jedes blockelement hat per default ne margin, egal ob du die angibts oder nicht. diese margin kann auch 0px sein ist aber dennoch ne margin...

ist auch nur ne idee. irgend nen grund muß es ja haben, dass es gerade der firefox, der ja bedeutend standardkonformer arbeitet als der explorer nicht wie gewünscht darstellt und nen fehler im code seh ich nicht...

ähm korrektur:
das xmlns attribut im <html> tag muß raus. das hat in html 4.0. nix zu suchen. aber daran liegts nicht
 
Zuletzt bearbeitet:

Emporia

Nicht mehr ganz neu hier

AW: margin-top und FF

Ja genau, das ist ja das Blöde, wenn´s im IE falsch dargestellt werden würde ... aber so :hmpf:.
Ich sitz nur leider gerade über einer anderen Sache und kann mich nicht so recht damit beschäftigen (obwohl´s mich jetzt brennend interessiert) ...
 

leohh

CSS verliebt

AW: margin-top und FF

Was interessiert dich denn hier noch?!
Wuerde doch schon richtig erkannt, dass es an collapsing-margins liegt.
Fix dafuer waere eben die Sache mit dem Padding fuers Elternelement,
ein unsichtbarer Border, oder die haessliche Sache mit dem padding:1px; margin:-1px; fuer das Elternelement.
 

Emporia

Nicht mehr ganz neu hier

AW: margin-top und FF

Ich habe es jetzt nur mal schnell zusammengefitzelt: Mit float ist die Anzeige in den Browsern ident.
 

lucy_lawless

XHTML/CSS Fetischistin

AW: margin-top und FF

Ich habe es jetzt nur mal schnell zusammengefitzelt: Mit float ist die Anzeige in den Browsern ident.

ja, weil auch gefloatete Elemente, genau wie positionierte keine zusammenfallenden Ränder haben. Aber ganz ehrlich: float hat an der Stelle echt nichts zu suchen. Die Lösung mit dem padding des Elternelements ist schon die beste und sauberste...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.481
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben