margin: So, Leute ich gehe baden

[Patrick Andrieu]

Hallo alle!

Hoffentlich bezieht sich diesmal margin-top zu dem Elternelement (sprich die Badewanne) und nicht zum umgebenden Element (sprich: das Badezimmer), sonst seht ihr mich nie wieder!

Die Frage kommt morgen, habe heute keinen Nerv mehr dazu!

Viele Grüße aus Frankfurt/Main,
Patrick

[wahsaga]

hi,

Hoffentlich bezieht sich diesmal margin-top zu dem Elternelement (sprich die Badewanne) und nicht zum umgebenden Element (sprich: das Badezimmer),

Wenn Badezimmer nicht Vorfahrenelement von Badewanne wäre - dann läge ziemlich sicher invalide Statik vor.

sonst seht ihr mich nie wieder!

display:none oder visibility:ashamed?

gruß,
wahsaga

[Cybaer]

Hi,

display:none oder visibility:ashamed?

zoom:3.0 ! important

Und wir gut, daß man in CSS auch cm als Einheit hat - für width und so ... O;->

Gruß, Cybaer

[MudGuard]

Hi,

display:none oder visibility:ashamed?

letzteres sollte aber mit color:red und position:corner; kombiniert werden ...

cu,
Andreas

[wahsaga]

hi,

display:none oder visibility:ashamed?

letzteres sollte aber mit color:red und position:corner; kombiniert werden ...

... oder mit absoluter Positionierung und negativem Value für die bottom-Eigenschaft.

gruß,
wahsaga

[Mueller-Luedenscheid]

Hoffentlich bezieht sich diesmal margin-top zu dem Elternelement (sprich die Badewanne) und nicht zum umgebenden Element (sprich: das Badezimmer), sonst seht ihr mich nie wieder!

Die Frage kommt morgen, habe heute keinen Nerv mehr dazu!

Grüßen Sie bitte Herrn Dr. Klöbner!

[_roro]

Full Ack!
Sorry for TOFU!

Was noch!?
Sauf ab Alter!

Ne, nicht wirklich!

Viele Grüße,
Rolf

Hallo alle!

Hoffentlich bezieht sich diesmal margin-top zu dem Elternelement (sprich die Badewanne) und nicht zum umgebenden Element (sprich: das Badezimmer), sonst seht ihr mich nie wieder!

Die Frage kommt morgen, habe heute keinen Nerv mehr dazu!

Viele Grüße aus Frankfurt/Main,
Patrick

[MudGuard]

Hi,

Hoffentlich bezieht sich diesmal margin-top zu dem Elternelement (sprich die Badewanne) und nicht zum umgebenden Element (sprich: das Badezimmer), sonst seht ihr mich nie wieder!

Hat die Badewanne eine border-top? Andernfalls schlagen die collapsing margins zu ... ;-)

cu,
Andreas

[Cheatah]

Hi,

Hat die Badewanne eine border-top?

und wenn ja, wie lautet die border-color? Hast Du das ganze schon mit AJAX behandelt? Fragen über Fragen ...

Cheatah

[MudGuard]

Hi,

Hat die Badewanne eine border-top?
und wenn ja, wie lautet die border-color?

aqua. Oder navy.
Unter Berücksichtigung von CSS 3 evtl. auch mediumaquamarine

Hast Du das ganze schon mit AJAX behandelt?

AJAX zerkratzt aber das E-Mail der Wanne ;-)

cu,
Andreas

[Orlando]

Hat die Badewanne eine border-top?

und wenn ja, wie lautet die border-color?

aqua. Oder navy.

Ohne AJAX bald burlywood.

Hast Du das ganze schon mit AJAX behandelt?

AJAX zerkratzt aber das E-Mail der Wanne ;-)

Oder den background, wenn ein SEXMLHttpRequest zum Einsatz kommt.

Roland

[wahsaga]

hi,

Hat die Badewanne eine border-top? Andernfalls schlagen die collapsing margins zu ... ;-)

Mit einer Microsoft-Badewanne hat man natürlich mal wieder mehr Spass als mit den anderen Langweiler-Modellen.

Allerdings muss man, gerade wenn kein border-top vorhanden, mit dem overflow aufpassen.

gruß,
wahsaga

[Cybaer]

Hi,

Allerdings muss man, gerade wenn kein border-top vorhanden, mit dem overflow aufpassen.

Und hat dann overflow-x und overflow-y was mit den jeweiligen Chromosomen zu tun?

Gruß, Cybaer

[MudGuard]

Hi,

Allerdings muss man, gerade wenn kein border-top vorhanden, mit dem overflow aufpassen.
Und hat dann overflow-x und overflow-y was mit den jeweiligen Chromosomen zu tun?

Was treibst Du denn in der Badewanne? ;-)

cu,
Andreas

[Cybaer]

Hi,

Und hat dann overflow-x und overflow-y was mit den jeweiligen Chromosomen zu tun?
Was treibst Du denn in der Badewanne? ;-)

Badewann ist out! Das heißt jetzt MPSB! *)

Gruß, Cybaer

*) My Personal Spaß-Bad, AKA Wanne 2.0 (schön interaktiv mit fleißiger Userinnen-Beteiligung) O;-))

[wahsaga]

hi,

Und hat dann overflow-x und overflow-y was mit den jeweiligen Chromosomen zu tun?

Nein, diese Eigenschaft betrifft mehr das Shopping-Verhalten:

#kleiderschrank { overflow-x:auto; }

gruß,
wahsaga

[imho_tep]

#kleiderschrank { overflow-x:auto; }

Deiner oder der Deiner Deinigen?
Best wishes, imho_tep

[Cybaer]

Hi,

#kleiderschrank { overflow-x:auto; }

ID? Da lohnt sich wohl eher ein Klassenselektor:

.kleiderschrank { margin:0; padding:0; min-width:100%; width:200%; max-width:auto; }

Gruß, Cybaer

[Patrick Andrieu]

Hallo!

Die Frage kommt morgen, habe heute keinen Nerv mehr dazu!

Wird heute wohl auch nichts: war 3 Stunden beim Steuerberater, heute abend schläft Jacqueline bei mir (das heißt: sie ist jetzt noch putzmunter) und gleich werde ich Heidi vorlesen müssen :)

Aber der Thread ist schon ganz lustig geworden - und: ich lebe noch, was bedeutet, dass gestern mein Bath Exblubberawetfox die margins richtig interpretiert hat.

Viele Grüße aus Frankfurt/Main,
Patrick

[Orlando]

heute abend schläft Jacqueline bei mir (das heißt: sie ist jetzt noch putzmunter) und gleich werde ich Heidi vorlesen müssen :)

Dass sie des Lesens nicht mächtig hatte ich vermutet. Aber was macht die Klum bei dir?

Roland

[Patrick Andrieu]

Hallo Orlando!

Dass sie (Jacqueline, 5 1/2) des Lesens nicht mächtig hatte ich vermutet.

Naja, sie kann schon alle Zahlen lesen, Ihren Namen selbst schreiben und noch so "Kleinigkeiten". Wir drei (also Papa, Mama und Ich) drängen sie aber zu nichts. Kommt Zeit, kommen Fragen, kommen Antworten!

Aber was macht die Klum bei dir?

Sie steht bei mir Modell.

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Hallo!

Terminkalender heute leer, daher jetzt die Frage, die ich vorgestern stellen wollte. Mittlerweile hat mich Andreas mit den collapsing margins in der Badewanne[1][2] bereits einen Schritt weiter gebracht.

Das Konstrukt war/ist folgendes:

<body>
<div id="content">
<div id="main">
<p id="breadctop">Brotkrümmelpfad:<br />
Brotkrümmel, Brotkrümmel, Brotkrümmel, Kümmelbrotkrümmel, ...</p>
<h1>Überschrift erster Kajüte</h1>

<div style="height:85px;background-image:url(screws.jpg);">
    <p style="margin-left:50%;margin-top:45px;background:transparent;border:1px solid blue;">Drei kleine Schrauben waren locker</p>
</div>

<h2>Überschrift zweiter Ordnung</h2>
<p>Wer hier Sophia Lorem-Ipsum erwartet, hat gelitten. Sie konnte heute nicht kommen, hat ansonsten damit keine Probleme, glaube ich.</p>
.
.
.
</div>
</div>
</body>

Gewünscht ist, dass der Text "Drei kleine Schrauben waren locker" nicht oben bündig mit der Oberkante des DIVs mit dem Hintergrundbild "screws.jpg" erscheint, sondern eher etwas mittig. IE 6 und 7 stellten das auch so dar. FF und Opera stellten das p-Element hingegen mit 45px Abstand zur darüberliegenden h1-Überschrift dar _und_ verschoben dabei das umgebende DIV. Erst die Angabe eines Borders bewirkt die gewünschte Anzeige in allen Browsern:

<div style="border:1px solid black;height:85px;background-image:url(screws.jpg);">
    <p style="margin-left:50%;margin-top:45px;background:transparent;border:1px solid blue;">Drei kleine Schrauben waren locker</p>
</div>

Ist dieses:

<cite collapsing margins>
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
</cite>

der Grund dafür? Irgendwie war ich bisher damit nie in Berührung gekommen.

Eine andere Frage habe ich, ich schätze, es hat auch damit zu tun, betrifft allerdings nur Opera (8 und 9):

Das DIV "content" soll kein Anzeichen von akuter Divitis darstellen, es ist ja für moderne Browsern überflüssig, nur brauch ich es für einen IE 6 - Workaround. Das DIV "main" ist wie folgt formatiert:

div#main {
 background-color : #F1FBFF;
 margin-left : 15%;
 margin-right : 15%;
 margin-top : 65px;
 margin-bottom : 65px;
 padding : 5px;
 border : 5px solid #A5CEFF;
}

IEs und FF zeigen den mit margin-bottom gewünschten 65px Abstand zum unteren Rand des DIV "content", der am Ende des Viewports abschließt. Beide Operas nicht, bis ich ein nicht inhaltsleeres Element dazwischen schiebe. Wo jetzt schrauben? ;)

[1] Hatte nicht so ein Grieche in seiner Badewanne irgend eine Theorie entwicklet, und sagte freudestrahlen Eureka?
[2] Ich war noch nie mit Andreas in der Badewanne. Er heißt ja nicht Müller-Lüdenscheidt und ich habe keine Quietsche-Ente.

Viele Grüße aus Frankfurt/Main,
Patrick

[wahsaga]

hi,

Ist dieses:

<cite collapsing margins>
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
</cite>

der Grund dafür?

Nein, etwas weiter unten:

"The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."

Dein Div um P herum hat _kein_ border-top, _kein_ padding-top, und das P kein "Clearing" - also haben wir ein "adjoining" margin, wo ich adjoin hier mal mit "hinzufügen" übersetzen möchte - das margin-top, welches du eigentlich für P haben wolltest, wird zum margin-top des Div (0) hinzugefügt - und damit wandert der Div als ganzes nach unten.

Eine andere Frage habe ich, ich schätze, es hat auch damit zu tun, betrifft allerdings nur Opera (8 und 9):

Das DIV "content" soll kein Anzeichen von akuter Divitis darstellen, es ist ja für moderne Browsern überflüssig, nur brauch ich es für einen IE 6 - Workaround. Das DIV "main" ist wie folgt formatiert:

div#main {
background-color : #F1FBFF;
margin-left : 15%;
margin-right : 15%;
margin-top : 65px;
margin-bottom : 65px;
padding : 5px;
border : 5px solid #A5CEFF;
}

IEs und FF zeigen den mit margin-bottom gewünschten 65px Abstand zum unteren Rand des DIV "content", der am Ende des Viewports abschließt. Beide Operas nicht, bis ich ein nicht inhaltsleeres Element dazwischen schiebe. Wo jetzt schrauben? ;)

Selbe Baustelle, andersherum:

"The bottom margin of an in-flow block-level element with a 'height' of 'auto' and 'min-height' less than the element's used height and 'max-height' greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border."

Schauen wir uns die "Bedingungen" der Reihe nach an (davon ausgehend, das #content keine weiteren Formatierungen hat, die du uns nicht genannt hast):

• height von #content ist auto
• Default für min-height ist 0, damit kleiner als die "used height", also die wirkliche Höhe von #content
• Default für max-height ist none, was ich als "unendlich" ansehen möchte - also ist die größer als die "used height" von #content
• #content hat kein border-bottom, kein padding-bottom

Damit sind also alle Bedingungen erfüllt, dass zum margin-bottom von #content (0) das margin-bottom seines letzten, im Fluss befindlichen Kindelementes - also #main - wiederum "hinzugefügt" wird:
#content muss sich also in seiner Gänze um 65px "von unten" absetzen, #main hält damit keinen margin mehr zum Ende von #content ein.

Mögen mich die anderen Spec-Schnüffler des Forums korrigieren, wenn ich etwas übersehen haben sollte - aber m.E. liegt Opera hier richtig, und der Firefox macht es überraschenderweise so falsch, wie man es vom IE sowieso erwarten durfte.

gruß,
wahsaga

[Patrick Andrieu]

Hallo wahsaga!

Nein, etwas weiter unten:

"The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."

Hm ja, hätte ich weiter lesen sollen! Danke für den Hinweis (und die anderen auch)!

Dein Div um P herum hat _kein_ border-top, _kein_ padding-top, und das P kein "Clearing" - also haben wir ein "adjoining" margin, wo ich adjoin hier mal mit "hinzufügen" übersetzen möchte - das margin-top, welches du eigentlich für P haben wolltest, wird zum margin-top des Div (0) hinzugefügt - und damit wandert der Div als ganzes nach unten.

OK, den Border habe ich jetzt ersetzt durch ein border-top, den ich gerne transparent gehabt hätte, wenn nicht IE 6, der eigentlich transparent als Farbangabe interpretiert, hier bei den Bordern unbedingt meint, dass schwarz durchsichtig ist. Also ist der border-top in der Hintergrundfarbe, hat den gleichen Effekt auf der Seite.

(davon ausgehend, das #content keine weiteren Formatierungen hat, die du uns nicht genannt hast)

Ja, erschien mir auf den ersten Blick nicht so wichtig, ist es anscheindend doch. Hier die Formatierung für #content:

#content {
 background : #eee
              url(dot.gif)
              no-repeat
       50%
       5px;
 overflow : auto;
 height : 100%;
 max-height : 100%;
 border-bottom : 1px solid red;
 z-index : 0;
}

Den border-bottom habe ich aufgrund von:

• #content hat kein border-bottom, kein padding-bottom

erfolglos hinzugefügt. padding-bottom scheidet aus, weil es mir aufgrund des notwendigen Workarounds für die Simulation von position:fixed für Spaßbremse IE 6 den unteren Teil der Scrollleiste stibitzt - es sei denn, ich setzte es auf 1px, aber auch das bringt Opera nicht dazu, den Abstand von 65px zum unteren Rand zu rendern.

aber m.E. liegt Opera hier richtig,

Der nicht mehr weiterentwickelte Mozilla (letzte Version) handelt es genauso. Zusätzlich bewirkt das Workaraound hier, dass das Scrollrad der Maus nicht zu gebrauchen ist.

Ach ja, habe eine Testseite in z_testdir online gestellt:

http://www.atomic-eggs.com/z_testdir/margins.html

Viele Grüße aus Frankfurt/Main,
Patrick

[wahsaga]

hi,

Den border-bottom habe ich aufgrund von:

• #content hat kein border-bottom, kein padding-bottom
  erfolglos hinzugefügt. padding-bottom scheidet aus, weil es mir aufgrund des notwendigen Workarounds für die Simulation von position:fixed für Spaßbremse IE 6 den unteren Teil der Scrollleiste stibitzt

Hm, nutzt du keine Browserweiche, um diesen Workaround nur IE <= 6 zu servieren?

Das würde nmlich auch dieses Problem mit dem Scrollrad beseitigen:

Der nicht mehr weiterentwickelte Mozilla (letzte Version) handelt es genauso. Zusätzlich bewirkt das Workaraound hier, dass das Scrollrad der Maus nicht zu gebrauchen ist.

Also ich nutze idR. position:fixed für Gecko, Opera und IE 7 - und die abweichenden Formatierungen für den Workaround bekommen nur IE < 7 per Conditional Comments.

gruß,
wahsaga

[Patrick Andrieu]

Hallo wahsaga!

Hm, nutzt du keine Browserweiche, um diesen Workaround nur IE <= 6 zu servieren?

Ich nutze das Star HTML Hack:

/* IE 6 - Hack für fixierten Bereich */
* html #navigation {
 position : absolute;
 left : 2px;
}

werde aber etwas 'rumprobieren müssen... Demnach dürften die height und max-height-Angaben beide Probleme, Operas Haltung bezüglich des margin-bottom und das tote Scrollrad im Mozilla, verursachen (nehme ich an).

die abweichenden Formatierungen für den Workaround bekommen nur IE < 7 per Conditional Comments

CCs habe ich auch schon mal verwendet, nur gefallen sie mir nicht irgendwie. Ich bin zwar kein Purist (werde es allerdings immer mehr), und Hacks sind eher eine Notlösung die m.E. nicht im Quelltext der Webseite zu sehen sein sollen (meine CSS lagere ich normalerweise aus, nur für das Beispiel hier nicht).

BTW: Macht es überhaupt noch Sinn, sie die Arbeiten mit Mozilla anzuschauen, wenn er nicht weiterentwickelt wird und anscheinend sowohl offiziell als auch von den Usern definitiv durch Firefox ersetzt wurde:

3068 Page-Views mit Browsern der Gecko-Engine (Netscape 5, 6, oder 7, Mozilla, Firefox) = 32,61% (Total Netscape: 3070, oder 32,63%)
Davon:
Netscape 5, 6, 7: 48
Mozilla: 55
Firefox: 2965

?

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Hallo!

http://www.atomic-eggs.com/z_testdir/margins.html

werde aber etwas 'rumprobieren müssen... Demnach dürften die height und max-height-Angaben beide Probleme, Operas Haltung bezüglich des margin-bottom und das tote Scrollrad im Mozilla, verursachen (nehme ich an).

Die height-Angaben für html, body und das DIV #content sind jetzt innerhalb Star-HTML-Hack-Blocks:

/* IE 6 - Hack für fixierten Bereich */
* html body {
 overflow : hidden;
 height : 100%;
}
* html #content {
 height : 100%;
}
* html #navigation {
 position : absolute;
 left : 2px;
}

Mozilla "gestattet" wieder das Scrollen über's Mausrad und meine beiden Operas haben unten den gewünschten Abstand zum unteren Ende des Viewports.

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Re!

http://www.atomic-eggs.com/z_testdir/margins.html

Hatte irgendwann aus Versehen wieder die "fehlerhafte" Datei hochgeladen, und keiner hat was bemerkt... :)

Aber jetzt passt's wieder zu meinem vorangegangenen Post!

Viele Grüße aus Frankfurt/Main,
Patrick

[MudGuard]

Hi,

[1] Hatte nicht so ein Grieche in seiner Badewanne irgend eine Theorie entwicklet, und sagte freudestrahlen Eureka?

Archimedes. Auftrieb.

[2] Ich war noch nie mit Andreas in der Badewanne.

Und ich hoffe, daß es dabei bleibt ;-)

cu,
Andreas

[Patrick Andrieu]

Hallo MudGuard!

Archimedes. Auftrieb.

Ich kam auf den Namen nicht drauf. Immer hatte ich Aristoteles im Kopf, dann fiel mir nicht mehr ein, was:

"Tout corps plongé dans un liquide..." (wußte jeder damals auswendig, dieser Théorème d'Archimède [1])

auf Deutsch heißt...

[2] Ich war noch nie mit Andreas in der Badewanne.
Und ich hoffe, daß es dabei bleibt ;-)

Ich auch.

[1] Es gab mal in den 80ern einen Film, einen der ersten von und mit in Frankreich geborenen arabischen Einwandererkindern, der hieß: "Le thé au harem d'Archimède", hatte aber mit dem Theorem nur die Verballhornung des Namens gemeinsam ;)

Viele Grüße aus Frankfurt/Main,
Patrick