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

  • Hallo


    Aus den Bildern kann ich dein Problem leider nicht nachvollziehen. Was heißt


    Zitat

    Das margin funktioniert nicht richtig.


    Beschreibe bitte genauer was du erwartest und was daran nicht passt.


    Gruss


    MrMurphy

  • 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.

  • Hallo


    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


    Auch ohne das relativ neue "display: flex" wird von diesem Vorgehen bereits seit Jahren abgeraten.


    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.


    Gruss


    MrMurphy

  • Hey,


    habe mal kurz google bemüht und bin dabei auf diese Aussage gestoßen:

    Zitat

    vertical padding and margin are relative to width, but top and bottom aren't.


    das spricht für dein Phänomen...


    "Weniger" heißt in deinem Fall übrigens, das FF einfach gar keinen margin erzeugt ^^'
    (Da ist zwar ein weißer streifen, aber das ist kein echter Margin an der Stelle, zu sehen das wenn man den margin auf 50% schraubt sich einfach überhaupt nichts verändert ^^)


    Im gleichen Thread wurde daraufhin auf "top" (statt "margin-top") verwiesen (in Verbindung mit dem position-Attribut)...
    In einem begrenzten Rahmen, hat es bei mir damit funktioniert...


    Quelle: stackoverflow.com/questions/4982480/how-to-set-the-margin-or-padding-as-percentage-of-height-of-parent-container


    Grüße Kanu

  • Hm, jetzt bin ich ein wenig verwirrt. :D


    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. :D


    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. :)

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von JR Cologne ()

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


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


    Welcher Browser bzw. welche Version ist das?

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von JR Cologne ()

  • Hallo


    Zitat

    Es sollte jetzt behoben sein


    Ja. Wobei ich mir die Seite nur noch mal angeschaut und nicht getestet habe.


    Zitat

    Welcher Browser bzw. welche Version ist das?


    Es handelt sich um Chrome Version 51.0 und noch ein paar Zahlen dahinter unter Windows 7.


    Gruss


    MrMurphy