Margin funktioniert in Firefox und Edge nicht richtig

Hallo zusammen,

habe ein kleines Problem im Firefox und Edge. Das margin funktioniert nicht richtig.

Seht selbst...

Firefox 49.0.2:

[Blockierte Grafik: http://img5.fotos-hochladen.ne…/unbenannt34s0xifj9wl.png]

Edge 14.14393:

[Blockierte Grafik: http://img5.fotos-hochladen.ne…/unbenannt4kl3ufmat5h.png]

Chrome 53.0.2785.143 m (64-bit):

[Blockierte Grafik: http://img5.fotos-hochladen.ne…/unbenannt530fcbvl1og.png]

Hat jemand eine Idee, warum das so ist und wie ich das beheben kann?

Das letzte Bild zeigt, wie es sein sollte.

Falls ihr es selber testen wollt: http://jr-cologne.16mb.com/webdesign-jr/

Danke schon mal!

Gruß
JR Cologne

Das margin ist bei dem unteren Bild deutlich größer als bei den oberen Bildern.

Das soll möglichst gleich sein.

Falls die Bilder nicht helfen, kannst du es dir ja auch live im Browser anschauen.

Hm, jetzt bin ich ein wenig verwirrt.

Antwort kommt gleich...

Edit: So...

Zitat

Mit deinem Vorgehen bringst du mehrere Problemfelder zusammen:

a) margin-top mit %-Werten
b) dazu display: flex
c) dazu display: inline-block
d) dazu collapsing-margins

Das mit dem inline-block hatte ich überhaupt nicht in Erinnerung. Das scheint auch der Grund des sehr kleinen Abstandes zu sein. Die Lösung war display: block und ein clearfix.

Jetzt habe ich wirklich gar kein margin-top und -bottom mehr.

Collapsing-Margins: Verstehe ich das richtig, dass dadurch das margin von meinem main-Element mit dem margin vom #content_wrap zusammengefasst wird und dadurch das #content_wrap keinen margin hat, bekommt das main-Element auch keinen?

Dann frage ich mich, warum Chrome und der IE dieses Prinzip der collapsing-margins nicht verfolgen. Oder übersehe ich da irgendwas?

Zitat

Am sinnvollsten ist es bei margin-top und margin-bottom grundsätzlich auf %-Werte zu verzichten. Hier spielt zum Beispiel die seit Jahren eingeführte Einheit rem ihre Vorteile aus.

Warum sollte man rem für margin benutzen. Das halte ich für falsch, denn dann würden sich jegliche Abstände ja auf die Schriftgröße beziehen.

Musst du mir mal genauer erläutern, wo da der Vorteil liegen soll, außer das man keine Probleme mit collapsing-margins hat...

kanufrosch Was heißt denn, dass es bei dir in einem begrenzten Rahmen funktioniert hat?

Also, um dieses Problem mit dem margin zu beheben, könnte ich natürlich einfach dem #content_wrap ein margin-top und -bottom von 1.5% geben. Dann hätte ich mein gewünschtes Ergebnis. Das Problem dabei ist allerdings, dass ich in Chrome dann den doppelten Abstand hätte, was nicht so wirklich zielführend wäre.

Ich bräuchte also irgendeine Möglichkeit, nur bestimmte Browser anzusprechen.

Zum Beispiel -moz- davor zu setzen, habe ich schon versucht. Das geht nicht.

Gibt es mit HTML/CSS noch irgendeine Möglichkeit?

Ansonsten müsste ich wohl auf JS zurückgreifen...

Edit 2: Habe Folgendes gefunden: http://browserhacks.com/

Dort gibt es auch HTML-/CSS-Lösungen. Aber das scheint mir doch sehr "hacky" zu sein.

JS wäre dann vermutlich besser.

Edit 3: Ok, die Lösung lag auf der Hand, aber ich habe sie nicht gesehen.

#content_wrap bekommt ein padding von 1.5% und 0,
main bekommt ein margin von 0 2.5%.

Jetzt passt es in jedem Browser. Danke euch für die Hilfe.

Äh, ja. Das habe ich anscheinend übersehen, aber das geht ganz schnell und dann gehört das auch der Vergangenheit an.

Edit: Es sollte jetzt behoben sein, allerdings konnte ich das Problem bei mir nicht nachvollziehen...

Welcher Browser bzw. welche Version ist das?

Ok, gut.