[Erledigt] margin-bottom erzeugt im Firefox abstand nach oben

Squall · 11.03.2011, 11:00

Tach zusammen,

ich habe einkleines problem mit dem Firefox der mir meine Margins falsch berechnet. Vielleicht gibt es dafür eine erklärung, aber ich finde keine, daher dachte ich mir ich wende mich mal an euch.

Hier mal eine soweit wie möglich reduzierte form meines Problems, getestet im Firefox 3.6.15 unter Windows XP

PHP-Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>title</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <style type="text/css">
            .clear{clear:both;}
            .col{float:left;}
            .row{margin-bottom:300px;background-color:red;}
        </style>
    </head>
    <body>
        <div class="row">
            <div class="col">Lorem Ipsum</div>
            <div class="clear"></div>
        </div>
    </body>
</html>

Das problem ist dass margin-bottom auch einen abstand nach oben erzeugt. Währe schön wenn ihr euch auch dann zurückmeldet wenn ihr es selbst nicht erklären könnt.

eagle275 · 11.03.2011, 11:37

hm .. bei Firefox ... fällt mir nur das hier ein :

http://www.peterkropff.de/tutorials/...reppen_bug.htm

schau mal, ob es auf dein Problem zutrifft - soll aber eigentlich seit 3.5 behoben sein ....

fab · 11.03.2011, 11:47

Kann ich nicht nachvollziehen: http://cssdesk.com/nPCSQ

Ist dein Abstand nach oben vielleicht einfach der margin vom body-Element?

eagle275 · 11.03.2011, 12:00

er hat ja für Body und * gar keine Margins angegeben .... möglich, dass es damit zusammenhängt

Squall · 11.03.2011, 12:04

Genau dass weiß ich ja nicht.

Laut meinem Code ist der einzige noch verbliebene abstand der erwähnte margin-bottom. Dennoch schiebt mir der Firefox den kompletten Body um den eingetragenen Abstand nach unten.

Ich presönlich tippe ja auf einen Firefox Bug.

Squall · 11.03.2011, 12:14

Zitat:

Zitat von eagle275

er hat ja für Body und * gar keine Margins angegeben .... möglich, dass es damit zusammenhängt

wenn du dass mit einem weil begründen kannst, könnte ich dem auch glauben schenken, es ist nicht logisch dass nur weil ich die einstellungen nicht resetet habe. Der boddy immer um x pixel verschoben wird die eingentlich nur den div etwas angehen sollten.

eagle275 · 11.03.2011, 12:40

nun ich kann es nicht exakt begründen - aber zum Bleistift bei microsofts Internet explorer gibt es - Je nach Version unterschiedliche - Mindestgrößen für Pop-Up Fenster - die Microsoft in den Tiefen der Knowledge Base auch erläutert - beim Firefox hab ich zwar davon noch nix gehört - aber vielleicht liegt es ja trotzdem an so etwas .... Fehler kann man zwar auch nicht ausschließen - aber ich bin doch der Meinung, wenn der Fehler soo offensichtlich ist, dann ist er mit Sicherheit schon mal aufgefallen und längst behoben .. Es ist ja keiner der typischen "Fehler tritt sporadisch auf, wenn X und A und B ..." Dinger

Squall · 11.03.2011, 13:13

Zitat:

Zitat von eagle275

Es ist ja keiner der typischen "Fehler tritt sporadisch auf, wenn X und A und B ..." Dinger

Eben doch, der fehler tritt nur auf weil .col ein float:left hat. Schlatet man dies aus ist der fehler weg, aber ich brauche sowohl float als auch den margin. Der grund ist der das es in einem .row mehrere .col geben kann, die aber nebeneinander positioniert seien müssen.

ChrisB · 11.03.2011, 13:19

Es hat auf jeden Fall etwas mit collapsing margins (/adjoining margins) zu tun,
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
- denn sobald du .row ein padding-top oder border-top verpasst, verschwindet der beobachtete Effekt. Bzw. auch, wenn .col nicht mehr gefloatet wird.

Ob das Verhalten des FF korrekt ist, kann ich aber momentan auch nicht sagen - für bottom-margins kann ich das da gerade nicht rauslesen

Neben den oben genannten Möglichkeiten, das Verhalten abzustellen, wären overflow:hidden oder float:left;width:100% für .row zwei weitere.

Zitat:

Zitat von Squall

Eben doch, der fehler tritt nur auf weil .col ein float:left hat. Schlatet man dies aus ist der fehler weg, aber ich brauche sowohl float als auch den margin. Der grund ist der das es in einem .row mehrere .col geben kann, die aber nebeneinander positioniert seien müssen.

Klingt fast so, als würdest du tabellarische Daten darstellen wollen ... aber mit DIV-Suppe statt einer angebrachten Tabelle.

Squall · 11.03.2011, 14:22

Hallo Chris,

mein englisch ist zwar nicht das beste, aber geht es beim Thema collapsing margins nicht darum dass 2 margins die aufeinandertreffen, keine 2 abstände erzeugen sollen? denn dann dürfte es nichts miteinander zu tun haben, da sich ja bei mir der komplette Body fortbewegt.

Aber dennoch danke ich dir sehr für die Diversen Lösungsansätze. Habe mich erstmal für die overflow variante entschieden. Dennoch wird mich das ganze noch etwas beschäftigen da es mir einfach nicht in den Kopf will warum das passiert. Eventuell melde ich mich auch mal bei Bugzlla an.

Was die Divsuppe angeht, diese dient der Layout Struktur. Meines wissens nach ist es in Tables nicht möglich mal 2 und mal 4 spalten zu haben. Ausserdem dachte ich das Tabellenlayouts überholt wirken könnten

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] IE zeigt die Seite nicht richtig an	Nikon	HTML, Usability und Barrierefreiheit	4	28.01.2011 23:05
Googlemaps und IE8	leder	JavaScript, Ajax und mehr	0	17.03.2010 15:18
[Erledigt] Firefox springt bei Skripten mit session_start nach oben		Off-Topic Diskussionen	18	02.08.2005 12:20

11.03.2011, 11:00
Squall Erfahrener Benutzer Registriert seit: 19.03.2009 Beiträge: 539 PHP-Kenntnisse: Fortgeschritten	[Erledigt] margin-bottom erzeugt im Firefox abstand nach oben Tach zusammen, ich habe einkleines problem mit dem Firefox der mir meine Margins falsch berechnet. Vielleicht gibt es dafür eine erklärung, aber ich finde keine, daher dachte ich mir ich wende mich mal an euch. Hier mal eine soweit wie möglich reduzierte form meines Problems, getestet im Firefox 3.6.15 unter Windows XP PHP-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <style type="text/css"> .clear{clear:both;} .col{float:left;} .row{margin-bottom:300px;background-color:red;} </style> </head> <body> <div class="row"> <div class="col">Lorem Ipsum</div> <div class="clear"></div> </div> </body> </html> Das problem ist dass margin-bottom auch einen abstand nach oben erzeugt. Währe schön wenn ihr euch auch dann zurückmeldet wenn ihr es selbst nicht erklären könnt. Geändert von Squall (11.03.2011 um 11:57 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

11.03.2011, 11:37
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	hm .. bei Firefox ... fällt mir nur das hier ein : http://www.peterkropff.de/tutorials/...reppen_bug.htm schau mal, ob es auf dein Problem zutrifft - soll aber eigentlich seit 3.5 behoben sein .... __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste Geändert von eagle275 (11.03.2011 um 11:43 Uhr).

11.03.2011, 11:47
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Kann ich nicht nachvollziehen: http://cssdesk.com/nPCSQ Ist dein Abstand nach oben vielleicht einfach der margin vom body-Element? __________________ PHP Blog + Library CSS Effects + Tools

11.03.2011, 12:00
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	er hat ja für Body und * gar keine Margins angegeben .... möglich, dass es damit zusammenhängt __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

11.03.2011, 12:04
Squall Erfahrener Benutzer Registriert seit: 19.03.2009 Beiträge: 539 PHP-Kenntnisse: Fortgeschritten	Genau dass weiß ich ja nicht. Laut meinem Code ist der einzige noch verbliebene abstand der erwähnte margin-bottom. Dennoch schiebt mir der Firefox den kompletten Body um den eingetragenen Abstand nach unten. Ich presönlich tippe ja auf einen Firefox Bug.

11.03.2011, 12:40
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	nun ich kann es nicht exakt begründen - aber zum Bleistift bei microsofts Internet explorer gibt es - Je nach Version unterschiedliche - Mindestgrößen für Pop-Up Fenster - die Microsoft in den Tiefen der Knowledge Base auch erläutert - beim Firefox hab ich zwar davon noch nix gehört - aber vielleicht liegt es ja trotzdem an so etwas .... Fehler kann man zwar auch nicht ausschließen - aber ich bin doch der Meinung, wenn der Fehler soo offensichtlich ist, dann ist er mit Sicherheit schon mal aufgefallen und längst behoben .. Es ist ja keiner der typischen "Fehler tritt sporadisch auf, wenn X und A und B ..." Dinger __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

11.03.2011, 14:22
Squall Erfahrener Benutzer Registriert seit: 19.03.2009 Beiträge: 539 PHP-Kenntnisse: Fortgeschritten	Hallo Chris, mein englisch ist zwar nicht das beste, aber geht es beim Thema collapsing margins nicht darum dass 2 margins die aufeinandertreffen, keine 2 abstände erzeugen sollen? denn dann dürfte es nichts miteinander zu tun haben, da sich ja bei mir der komplette Body fortbewegt. Aber dennoch danke ich dir sehr für die Diversen Lösungsansätze. Habe mich erstmal für die overflow variante entschieden. Dennoch wird mich das ganze noch etwas beschäftigen da es mir einfach nicht in den Kopf will warum das passiert. Eventuell melde ich mich auch mal bei Bugzlla an. Was die Divsuppe angeht, diese dient der Layout Struktur. Meines wissens nach ist es in Tables nicht möglich mal 2 und mal 4 spalten zu haben. Ausserdem dachte ich das Tabellenlayouts überholt wirken könnten