Margin verschiebt ganzen Container!

[haggle.123]

Hallo!
Wenn ich dem inhalt ("Was ist gamecase") einen margin-top gebe, um ihn etwas herunter zu positionieren, dann verschiebt er den ganzen mutter-container mit runter! Tritt sowohl in Firefox und IE auf.
Hier zum vergleich
Vorher:
http://trenchsquad.tr.funpic.de/Verpackung/home.html

Nacher:
http://trenchsquad.tr.funpic.de/Verpackung2/home.html

Kann mir jemand helfen!

MFG
haggle

[wildmieze]

ich weiß zwar nicht genau, wie es hinterher aussehen soll, aber ich habe öfter genau das gleiche problem (idR bei überschriften im seiten-header) .. ich nehm dann einfach padding statt margin .. geht aber natürlich nicht in allen fällen ..

.. es würde mich aber auch interessieren, warum eine margin-top-angabe im kind-element das eltern-element mit "runterzieht" ..

[sejuma]

Das liegt daran:

.infobox {
	display:block;
	width:334px;
	height:156px;
	margin:30px;

}

"margin: 30px" bedeutet:
Auf jeder Seite ist ein Abstand von 30px., also auch oben.
Du willst ihn vermutlich aber nur links haben.


Also musst du entweder schreiben:

margin-left: 30px;

oder:

margin: 0 0 0 30px;

Diese einzelnen Werte sind im Uhrzeigersinn von oben beginnend und bedeuten:

oben, rechts und unten: "0" Abstand
links: 30px Abstand.


Übrigens:
"display: block" kannst du bei allen div's löschen. Das ist Standardeigenschaft.

[haggle.123]

Das liegt daran:

.infobox {
	display:block;
	width:334px;
	height:156px;
	margin:30px;

}

"margin: 30px" bedeutet:
Auf jeder Seite ist ein Abstand von 30px., also auch oben.
Du willst ihn vermutlich aber nur links haben.


Also musst du entweder schreiben:

margin-left: 30px;

oder:

margin: 0 0 0 30px;

Diese einzelnen Werte sind im Uhrzeigersinn von oben beginnend und bedeuten:

oben, rechts und unten: "0" Abstand
links: 30px Abstand.


Übrigens:
"display: block" kannst du bei allen div's löschen. Das ist Standardeigenschaft.

Danke für deine Mühe!
Aber leider will ich margin auf allen seiten. Wenn ich dass mache, wird der Mutter-Container mitverschoben (mir unerklärlich).
Weiß wer wie ich das besser machen kann? Eine art Workaround oder so wäre nicht schlecht.

[wildmieze]

ok, ich hätte vielleicht mal ins css gucken sollen .. das kanns natürlich auch sein >.< ..

mich ärgert nur grade, daß ich "mein" margin-problem nicht reproduzieren kann .. dabei hab ich das recht oft, daß der muttercontainer irgendwie das margin-top des kindelementes annimmt .. aber wenn ich bei den betreffenden seiten jetzt wieder von padding auf margin zurückstelle, gibt es komischerweise keine probleme ...
.. ist da irgendein bug bekannt ..? .. wenn nicht, hab ich vermutlich dann doch immer irgendwo murks im css drumherum

edit:
@haggle:
kannst du mal ein bild zeigen, wie das hinterher genau aussehen soll..? .. dein zweites beispiel sieht für mich nämlich "richtig" aus .. aber das nützt natürlich nix, wenn es nicht das ist, was du vorhast

[sejuma]

Dann mach's mal mit padding:

.infobox {
display:block;
width:334px;
height:156px;
padding: 30px;

}

[haggle.123]

ok, ich hätte vielleicht mal ins css gucken sollen .. das kanns natürlich auch sein >.< ..

mich ärgert nur grade, daß ich "mein" margin-problem nicht reproduzieren kann .. dabei hab ich das recht oft, daß der muttercontainer irgendwie das margin-top des kindelementes annimmt .. aber wenn ich bei den betreffenden seiten jetzt wieder von padding auf margin zurückstelle, gibt es komischerweise keine probleme ...
.. ist da irgendein bug bekannt ..? .. wenn nicht, hab ich vermutlich dann doch immer irgendwo murks im css drumherum

edit:
@haggle:
kannst du mal ein bild zeigen, wie das hinterher genau aussehen soll..? .. dein zweites beispiel sieht für mich nämlich "richtig" aus .. aber das nützt natürlich nix, wenn es nicht das ist, was du vorhast

Welchen browser hast du? Mit opera solls anscheinen funktionieren. Aber den hab ich nicht^^.

Naja ich habs jetzt mit padding gelöst, obwohl ich eigentlich darauf verzichten wollte weil die alten IE damit probleme haben.

[wildmieze]

bei mir ists wohl umgekehrt^^ .. im opera (und wie ich gerade sehe: auch im firefox) habe ich zwischen dem blauen und mittelgrauen bereich eine 30px-breite lücke - so hatte ich mir das problem vorgestellt .. im IE7 und IE6 stimmt es wohl, da gibt es keine lücken, der info-kasten sitzt 30px vom linken und oberen rand des mittelgrauen bereiches ..

EDIT:
oh, und danke für den browserhinweis .. jetzt konnte ich mein margin-problem nämlich auch reproduzieren:

http://www.miezes-welt.de/margin.htm

.. im IE ist es (für mein empfinden) richtig, im firefox falsch .. und das ist nur ganz minimales css:

header {height:120px;background:#ccffcc;}
h3 {margin-top:40px;}


scheint also irgendein "standard" zu sein .. aber warum??

[koslowski]

Moin,

.. im IE ist es (für mein empfinden) richtig, im firefox falsch .. und das ist nur ganz minimales css:

scheint also irgendein "standard" zu sein .. aber warum??

nein, FF macht es richtig und der IE falsch.
Das sind "Collapsing Margins" ein wichtiges CSS-Prinzip.

Gib deinem header mal einen Rahmen, dann schlägt das margin der Überschrift nicht mehr durch.

Gruß
koslowski

[schollsen]

Das ist ein Bug, der vor allem (und leider schon lange) im Firefox auftritt.

#contbig {
    padding-top: 1px;
}

sollte Abhilfe schaffen.

[koslowski]

Moin,

Das ist ein Bug, der vor allem (und leider schon lange) im Firefox auftritt.

#contbig {
    padding-top: 1px;
}

sollte Abhilfe schaffen.

sorry wenn ich das so krass sage, aber deine Aussage ist schlichtweg falsch.
Wie ich schon postete ist das kein Bug vom FF sondern entspricht den Webstandards.

Du solltest dich vielleicht auch mal mit "Collapsing Margins" beschäftigen, oder wenn du das schon getan hast, hapert es noch ein wenig am Verständnis.

Gruß
koslowski

[wildmieze]

ahaaaa .. danke

ok, die logik dahinter verstehe ich zwar trotzdem nicht so ganz, aber ich fand es ja auch schon immer unlogisch, daß margins/paddings zur höhe/breite von boxen dazuzählen^^ ..
.. aber das haben schlauere köpfe als ich entschieden, da werde ich mich nicht wehren

[max.m]

daß margins/paddings zur höhe/breite von boxen dazuzählen

Also zumindest paddings sollten aber einleuchtend sein.

[koslowski]

Hi,

ahaaaa .. danke

ok, die logik dahinter verstehe ich zwar trotzdem nicht so ganz, aber ich fand es ja auch schon immer unlogisch, daß margins/paddings zur höhe/breite von boxen dazuzählen^^ ..
.. aber das haben schlauere köpfe als ich entschieden, da werde ich mich nicht wehren

das paddings/border/margin zur wahren Breite einer Box dazugehören fand ich nach etwas Überlegen sogar logisch.

Weniger logisch, ja sogar erstmal ziemlich unverständlich fand ich diese "Collapsing Margins".

Besonders so wie in deinem Fall, wo das topmargin des inneren Elementes auf das umgebende Element durchschlägt erschien mir das eher bescheu.... als eingängig.

Aber okay, ist halt so, egal wie ich das finde.

Gruß
koslowski

[wildmieze]

naja, an die margins/paddings hab ich mich gewöhnt .. aber ich finds immer noch irgendwie blöd - ja, auch bei paddings, auch wenn die nen kleinen tacken logischer sind .. wenn ich ne 500px-box möchte, will ich auch 500px schreiben dürfen. völlig wurscht, ob da innen oder außen noch irgendwelche abstände vorkommen.. aber wie gesagt, es ist, wie es ist^^

.. und diese collapsing margins .. joah .. entzieht sich mir völlig, auch nach mehrmaligem lesen .. mag sein, daß es da gute anwedungen für gibt, aber warum eine äußere box den abstand einer inneren box übernimmt .. neeneenee .. aber solange es immer noch irgend einen weg gibt, das gewünschte zu erreichen, werde ich es überleben