Child's top margin and parent's background

[Thomas Mlynarczyk]

Hello,

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

<div style="backgrou nd-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.infosystem s.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Hello,

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

<div style="backgrou nd-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.infosystem s.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.infosystem s.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.infosystem s.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;widt h: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;widt h: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.infosystem s.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;widt h: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>