Child's top margin and parent's background

[Thomas Mlynarczyk]

Hello,

The following gives different results in IE and "Non-IE" browsers:

<div style="background-color: green; width: 200px">
<div style="margin-top: 20px; background-color: red">
Hello
</div>
</div>

While IE shows a visible green top margin of 20px, Mozilla and other
browsers start the parent element's background color only at the height of
the inner div, thus showing no green at all. Is there a way to achieve the
same behaviour (one way or the other) in all browsers?

Greetings,
Thomas

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Hello,

The following gives different results in IE and "Non-IE" browsers:

<div style="background-color: green; width: 200px">
<div style="margin-top: 20px; background-color: red">
Hello
</div>
</div>

While IE shows a visible green top margin of 20px, Mozilla and other
browsers start the parent element's background color only at the height of
the inner div, thus showing no green at all. Is there a way to achieve the
same behaviour (one way or the other) in all browsers?

Collapsing margins here. Use padding on outer element.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

While IE shows a visible green top margin of 20px, Mozilla and other
browsers start the parent element's background color only at the
height of the inner div, thus showing no green at all. Is there a
way to achieve the same behaviour (one way or the other) in all
browsers?

Collapsing margins here. Use padding on outer element.

Unfortunately, this wouldn't "work" in my case. There are several equally
styled inner elements, vertically separated by a top margin. Using a top
padding on the outer element would mean that the margin no longer collapses
and I would end up with more vertical space than I want. I suppose I could
give the first element a special treatment but I find it not very elegant to
introduce a class="first" for that. (I know there are special CSS selectors
for such a purpose, but IE doesn't support them.) I think that if I put a
border on the outer element, the margin would no longer collapse, but what
if I don't want a border?

Or is there a way to make IE collapse the margin as well?

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Also sprach Lauri Raittila:

Collapsing margins here. Use padding on outer element.

Unfortunately, this wouldn't "work" in my case. There are several equally
styled inner elements, vertically separated by a top margin. Using a top
padding on the outer element would mean that the margin no longer collapses
and I would end up with more vertical space than I want.

Only use bottom margin on inner elements? (margin: 0 20px 20px 20px;)

Use padding on inner element? someting like padding-top:1px;

(Or do some tricks with relative positioning.)
I suppose I could
give the first element a special treatment but I find it not very elegant to
introduce a class="first" for that.
div.outer:first-child {margin-top:0;}
(I know there are special CSS selectors
for such a purpose, but IE doesn't support them.)
But you didn't have problem with IE, right?
I think that if I put a border on the outer element, the margin would
no longer collapse, but what if I don't want a border?
Yes, any content, border or padding between margins means that margin
won't collapse
Or is there a way to make IE collapse the margin as well?

Make sure it is in standards mode. Don't know if it helps though.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

Only use bottom margin on inner elements? (margin: 0 20px 20px 20px;)
That would only move the problem from top to bottom :-( And my experiments
have shown that it creates other problems with IE.
Use padding on inner element? someting like padding-top:1px;
Yes, but I'd like to have padding, border and margin of all elements
"available" for design styling. If I used padding to replace margin, I
couldn't use borders, as they would appear in the wrong place.
(Or do some tricks with relative positioning.)
Ah, I hadn't thought of that - this might be a good idea indeed! :-)
div.outer:first-child {margin-top:0;}

(I know there are special CSS selectors
for such a purpose, but IE doesn't support them.)

But you didn't have problem with IE, right?

I wanted to achieve the same behaviour in "all" browsers, be it IE's way or
the other. But your suggestion with the first-child selector opens up new
roads for me to explore, so to speak :-) Thanks!

I think that if I put a border on the outer element, the margin would
no longer collapse, but what if I don't want a border?

Yes, any content, border or padding between margins means that margin
won't collapse

So, theoretically,

..outer:before {
content: ".";
height: 0;
display: block;
visibility: hidden;
}

might do the trick, assuming that hidden stuff still "counts" as content. I
must try that out...

Come to think of it, does the margin actually *collapse* here? I mean, the
space defined by that margin is still there, only non-IE browsers seem to
"move" it outside the parent element, while IE keeps it within. The visual
difference is just the background covering the margin space in IE but not in
other browsers.

Or is there a way to make IE collapse the margin as well?

Make sure it is in standards mode. Don't know if it helps though.

It is. It doesn't :-(

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Also sprach Lauri Raittila:

Only use bottom margin on inner elements? (margin: 0 20px 20px 20px;)
That would only move the problem from top to bottom :-( And my experiments
have shown that it creates other problems with IE.

Maybe your it would not fall apart, if you had 1px padding on top and
bottom of outer div? IMHO that is better than playing with relative
positioning or negative margins...

I don't think many could see the difference...

(Or do some tricks with relative positioning.)

Ah, I hadn't thought of that - this might be a good idea indeed! :-)

div.outer:first-child {margin-top:0;}

(I know there are special CSS selectors
for such a purpose, but IE doesn't support them.)

But you didn't have problem with IE, right?

I wanted to achieve the same behaviour in "all" browsers, be it IE's way or
the other.

If it would work on IE, do you need to know it is because 2 bugs happen
to have opposite effect? After all, next IE version either fixes both
bugs, or you can ignore it...

Yes, any content, border or padding between margins means that margin
won't collapse

So, theoretically,

.outer:before {
content: ".";
height: 0;
display: block;
visibility: hidden;
}

might do the trick, assuming that hidden stuff still "counts" as content. I
must try that out...

Should work (on Gecko and Opera), but I don't think it is good idea.
There is at least 3 better ways...
Come to think of it, does the margin actually *collapse* here?
Yes.
I mean, the space defined by that margin is still there,
Margin of outer and inner div collapse to single margin.
only non-IE browsers seem to
"move" it outside the parent element, while IE keeps it within.

It just looks like that, as outer div does have 0 margin. Give it 50px
margin, and you see it makes no difference what margin the inner div
has...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

Maybe your it would not fall apart, if you had 1px padding on top and
bottom of outer div? IMHO that is better than playing with relative
positioning or negative margins...
I don't think many could see the difference...
Indeed, that would be the simplest solution.
Margin of outer and inner div collapse to single margin.

only non-IE browsers seem to
"move" it outside the parent element, while IE keeps it within.

It just looks like that, as outer div does have 0 margin. Give it 50px
margin, and you see it makes no difference what margin the inner div
has...

So the browser looks for the bigger of the two margins and uses only that?
While I agree that there are many circumstances, where this behaviour
simplifies things, there are also many instances (like this one) where the
collapsing is bad. Isn't there a way to explicitly tell the browser what one
needs? A "margin-collapse" attribute?

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Also sprach Lauri Raittila:

Maybe your it would not fall apart, if you had 1px padding on top and
bottom of outer div? IMHO that is better than playing with relative
positioning or negative margins...
I don't think many could see the difference...
Indeed, that would be the simplest solution.

Margin of outer and inner div collapse to single margin.

only non-IE browsers seem to
"move" it outside the parent element, while IE keeps it within.

It just looks like that, as outer div does have 0 margin. Give it 50px
margin, and you see it makes no difference what margin the inner div
has...

So the browser looks for the bigger of the two margins and uses only that?

Yes.
While I agree that there are many circumstances, where this behaviour
simplifies things,
Practically always, exept in this situation... It is so natural that even
if hardly anyone knows anything about margin collapsing, they expect it
happen.
there are also many instances (like this one) where the
collapsing is bad.
Can you name one other? And after that, a solution that would solve the
problem...
Isn't there a way to explicitly tell the browser what one
needs? A "margin-collapse" attribute?

No. But you could use float:left;width:100%; as margins for floats do not
collapse...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

[Collapsing margins simplify things]

Practically always, exept in this situation... It is so natural that
even if hardly anyone knows anything about margin collapsing, they
expect it happen.
Yes, but not when an element inside a container suddenly has its margin
sticking out of the latter. Of course, theoretically the top margin of the
inner element could always be replaced by by a top padding of the outer
element. In that case, however, the inner margin does not collapse with the
outer padding, and if there are several equally styled inner elements (<li>
inside <ul>, for example), one must explicitly set the first <li>'s top
margin to zero. And again, we face the problem of browser support for the
first-child selector :-(

there are also many instances (like this one) where the
collapsing is bad. Can you name one other?
You mean, unlucky me stumbled over the only case where the collapsing is a
problem?
And after that, a solution that would solve the problem...

If I had one, I wouldn't have started this thread...
Isn't there a way to explicitly tell the browser what one
needs? A "margin-collapse" attribute?

No. But you could use float:left;width:100%; as margins for floats do
not collapse...

Interesting. I must try that. But I'm afraid this will trigger a lot of
other problems. Thanks for this hint, though!

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Also sprach Lauri Raittila:

there are also many instances (like this one) where the
collapsing is bad.

Can you name one other?

You mean, unlucky me stumbled over the only case where the collapsing is a
problem?

Well, I have not seen any other, nor can I imagine one. There is not many
features that are better designed in CSS...

And after that, a solution that would solve the problem...

If I had one, I wouldn't have started this thread...

Meaned, how would you change CSS spec, so that it would solve the problem Isn't there a way to explicitly tell the browser what one
needs? A "margin-collapse" attribute?

No. But you could use float:left;width:100%; as margins for floats do
not collapse...

Interesting. I must try that. But I'm afraid this will trigger a lot of
other problems.

It does. Box modell makes it sure difficult, if you have some borders or
paddings... I still wonder why they didn't include box-sizing to CSS2.1 -
after all, almost every browser already supported it...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

[margin collapse not always good]

Meaned, how would you change CSS spec, so that it would solve the
problem
I suppose I would say that collapsing should take place only between
adjacent sibling margins, but not between parents and children. By default,
that is. In any case, there ought to be a special property which lets me
switch on and off the collapsing.

[using float will cause other problems] It does. Box modell makes it sure difficult, if you have some borders
or paddings... I still wonder why they didn't include box-sizing to
CSS2.1 - after all, almost every browser already supported it...

box-sizing?

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Also sprach Lauri Raittila:

[margin collapse not always good]

Meaned, how would you change CSS spec, so that it would solve the
problem
I suppose I would say that collapsing should take place only between
adjacent sibling margins, but not between parents and children.

Well it would make normal grouping much harder, and break traditional way
to render HTML - in other words, it wouldn't have been implemented
totally.

<div class="lead"><p>foo1<p>foo2</div>
<p>bar1<p>bar2</div>

foo1
<margins of p's collapse>
foo2
<margin for p>
<margin for p>
bar1
<margins of p's collapse>
bar2
And I think this situation is much more common.
By default, that is.
But you can't think any easy solution to how to change the default, or
can you. If your solution is to change default, I don't think I would
agree. But having new property, something like collapse-margins: siblings
| parent | all | none might make sence... OTOH, In CSS3 we have much
better selectors, so it might be redundant, and thatway not good idea.
[using float will cause other problems]

It does. Box modell makes it sure difficult, if you have some borders
or paddings... I still wonder why they didn't include box-sizing to
CSS2.1 - after all, almost every browser already supported it...

After all, in CSS2, all you needed to do was float:left, as width would
be same as block elements...
box-sizing?

MacIE invention, CSS propert to swich between IE5 and CSS box-modells.
Some variation works on most browsers.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

I suppose I would say that collapsing should take place only between
adjacent sibling margins, but not between parents and children.
Well it would make normal grouping much harder, and break traditional
way to render HTML - in other words, it wouldn't have been implemented
totally.

<div class="lead"><p>foo1<p>foo2</div>
<p>bar1<p>bar2</div>

Could there be an opening <div> tag missing?
foo1
<margins of p's collapse>
foo2
<margin for p>
<margin for p>
bar1
<margins of p's collapse>
bar2 And I think this situation is much more common.
But isn't it more logical and more intuitive to regard an (outer) element as
some kind of black box without its content having any influence whatsoever
outside the container? OTOH, this principle is also "violated" by the float
model.
But having new property, something like collapse-margins: siblings | parent | all | none might make sence...

I agree. But I would call it margin-collapse and also have
margin-top-collapse etc. just like with border. Also, it could have an
additional value to specify if collapsing could also occur with adjacent
paddings, but I'm not sure if that would be useful.
<ot>And while we're at it: a shorthand notation like margin: 5px 20px 0; but
with top and bottom being equal rather than left and right, would be useful.
I often encounter such cases. But I guess it can't be done as there is no
simple way of distinguishing it from the present three value shorthand.</ot>
OTOH, In CSS3 we have much
better selectors, so it might be redundant, and thatway not good idea.
We already have lots of good selectors in older versions. The problem is not
the specification, but the implementation. Namely in a certain popular
browser...

box-sizing?

MacIE invention, CSS propert to swich between IE5 and CSS box-modells.
The CSS version of doctype switching?
Some variation works on most browsers.

<hope probability="low">Making IE5 Win follow the standard box model?</hope>

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Also sprach Lauri Raittila:

I suppose I would say that collapsing should take place only between
adjacent sibling margins, but not between parents and children.
Well it would make normal grouping much harder, and break traditional
way to render HTML - in other words, it wouldn't have been implemented
totally.

<div class="lead"><p>foo1<p>foo2</div>
<p>bar1<p>bar2</div>

Could there be an opening <div> tag missing?

Irrelevant, opening tag is obviously before that part of code ;-)

foo1
<margins of p's collapse>
foo2
<margin for p>
<margin for p>
bar1
<margins of p's collapse>
bar2

And I think this situation is much more common.

But isn't it more logical and more intuitive to regard an (outer) element as
some kind of black box without its content having any influence whatsoever
outside the container? OTOH, this principle is also "violated" by the float
model.

Well, div element is there to group other elements. It would be very hard
to use it for that, whiout styling, unless margins collapse.

But having new property, something like collapse-margins: siblings |

parent | all | none might make sence...

I agree. But I would call it margin-collapse and also have
margin-top-collapse etc. just like with border. Also, it could have an
additional value to specify if collapsing could also occur with adjacent
paddings, but I'm not sure if that would be useful.
<ot>And while we're at it: a shorthand notation like margin: 5px 20px 0; but
with top and bottom being equal rather than left and right, would be useful.

I don't get it?
I often encounter such cases. But I guess it can't be done as there is no
simple way of distinguishing it from the present three value shorthand.</ot>

Is it really that hard to use 4 values? How often you have same top and
bottom and different left and right?

OTOH, In CSS3 we have much
better selectors, so it might be redundant, and thatway not good idea.

We already have lots of good selectors in older versions. The problem is not
the specification, but the implementation. Namely in a certain popular
browser...

Well, there is no selector in current CSS for last child element.

box-sizing?

MacIE invention, CSS propert to swich between IE5 and CSS box-modells.

The CSS version of doctype switching?

Soemthing like that, but without other quirks...
Some variation works on most browsers.

<hope probability="low">Making IE5 Win follow the standard box model?</hope>

No,

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

Well, div element is there to group other elements. It would be very
hard to use it for that, whiout styling, unless margins collapse.
So we should have a <group> element (for semantic grouping only, which does
not, by default affect the rendering) and a <box> element.
I don't get it?
"margin: 1px 2px 3px 2px" > "margin: 1px 2px 3px"
"margin: 1px 2px 1px 3px" > ?
Is it really that hard to use 4 values? How often you have same top
and bottom and different left and right?
Often enough to make me wonder if the three values shorthand shouldn't have
rather been used for that instead.
Well, there is no selector in current CSS for last child element.
Okay, I must read up a bit on which version supports which selector. But
this is rather academic as the real question is which browser supports which
selector.

[box-sizing - The CSS version of doctype switching?] Soemthing like that, but without other quirks...

Such as...? Should I use box-sizing instead? But it would invalidate my CSS,
wouldn't it?

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Also sprach Lauri Raittila:

Well, div element is there to group other elements. It would be very
hard to use it for that, whiout styling, unless margins collapse.
So we should have a <group> element (for semantic grouping only, which does
not, by default affect the rendering) and a <box> element.

Well, the box element would be only for styling, right? So it couldn't be
HTML, right?

I don't get it?

"margin: 1px 2px 3px 2px" > "margin: 1px 2px 3px"
"margin: 1px 2px 1px 3px" > ?

Is it really that hard to use 4 values? How often you have same top
and bottom and different left and right?

Often enough to make me wonder if the three values shorthand shouldn't have
rather been used for that instead.

Well, there is no sence to make
margin-alternative-shorthand as it takes more trouble than having one
value twice...

Well, there is no selector in current CSS for last child element.

Okay, I must read up a bit on which version supports which selector. But
this is rather academic as the real question is which browser supports which
selector.

Well, it is even more "academic" if there was some margin-collapse
argument, as AFAIK there is no UA that implements that, but there is
IIANM some that implement CSS3 selectord.
[box-sizing - The CSS version of doctype switching?]

Soemthing like that, but without other quirks...

Such as...? Should I use box-sizing instead?
But it would invalidate my CSS,
wouldn't it?

Well, if you actually do use quirks mode, it is irrelevant weather your
CSS is invalid, as it won't be rendered correctly anyway...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

So we should have a <group> element (for semantic grouping only,
which does not, by default affect the rendering) and a <box> element.

Well, the box element would be only for styling, right? So it
couldn't be HTML, right?
True. Then what about a CSS property that specifies if the element (div) is
to be a "real" box? Something like "display: box;"?
Well, there is no sence to make
margin-alternative-shorthand as it takes more trouble than having one
value twice...

I agree.

[Jan Roland Eriksson]

On Tue, 21 Dec 2004 11:57:47 +0100, "Thomas Mlynarczyk"
<bl*************@hotmail.com> wrote:

...what about a CSS property that specifies if the element (div) is
to be a "real" box? Something like "display: box;"?

Huh? A DIV element is by default suggested to have its content presented
as a block of information (hopefully).

--
Rex [who thinks that most 'new' ideas for CSS property:value pairs first
appears in ignorant minds]

[Thomas Mlynarczyk]

Also sprach Jan Roland Eriksson:

...what about a CSS property that specifies if the element (div) is
to be a "real" box? Something like "display: box;"?

Huh? A DIV element is by default suggested to have its content
presented as a block of information (hopefully).

Yes, of course, but here we were discussing the question whether an
element's margin should or should not collapse with the margin of its
parent. For situations where such a collapse is not wanted, I suggested a
new CSS value for display - "box" which is supposed to mean "display as
block (as a div would be displayed anyhow by default) but make sure that
everything within that element really stays within it" - thus, no collapsing
of margins nor dropping out of floated elements.

[Jan Roland Eriksson]

On Tue, 21 Dec 2004 22:03:37 +0100, "Thomas Mlynarczyk"
<bl*************@hotmail.com> wrote:

Also sprach Jan Roland Eriksson:

...what about a CSS property that specifies if the element (div) is
to be a "real" box? Something like "display: box;"? Huh? A DIV element is by default suggested to have its content
presented as a block of information (hopefully).

Yes, of course, but here we were discussing the question whether an
element's margin should or should not collapse with the margin of its
parent.
Yes I know, still since the current margin collapse behavior of CSS
has been there since CSS1 I have seen very few arguments for a
different way of dealing with this issue.
For situations where such a collapse is not wanted, I suggested a
new CSS value for display - "box" which is supposed to mean "display as
block (as a div would be displayed anyhow by default) but make sure that
everything within that element really stays within it" - thus, no collapsing
of margins nor dropping out of floated elements.

So what is it in reality that you find to be wrong with these
following examples?

http://www.css.nu/exp/layer-ex3a.html
http://www.css.nu/exp/layer-ex3b.html
http://www.css.nu/exp/layer-ex3c.html
http://www.css.nu/exp/layer-ex3d.html
http://www.css.nu/exp/layer-ex4a.html

Mozilla/Firefox/Opera recommended for viewing of above examples.

--
Rex