Probably very simple, but I can't see it

[Dr John]

A friend asked me to look at this page
http://myweb.tiscali.co.uk/simonrive...lvard/tlt.html

In IE7, the top margins applied to each div result in the second layer being 54px down from the top of the first layer and the third layer being 27px down from the top of the second one.

In Firefox, the second layer's margin is ignored and it is up against the top of the first layer. But the third layer is still 27px down from the second one.

Now the fun bit. Increase the top margin on the second layer by, say, 100px, and in FF, the first layer (and the ones inside it) drops by another 100px...

Explanations?

Solution to have it look the same in FF as in IE7?

[Centauri]

The display you see in Firefox is the correct implementation of vertical margin collapse, which IE gets wrong completely. If you are spacing an element within a container, the most stable way is to use padding on the container rather than margins on the element. Keep margin for spacing elements on the same "level". Also remember that any paddings applied to a container will need to be subtracted from its height. The gap you see under the inner image in IE is due to the paragraph height being added to by the padding set in different units - assign the padding in pixels and account for this measurement in the width and height.

body
{
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
.wrap
{
width: 675px;
margin: auto;
padding: 100px 0 0;
position: relative;
}
.firstlayer
{
background-image: url('450berries1.jpg');
width: 675px;
height: 273px;
margin: 0 auto;
position: relative;
padding: 54px 0 0;
}
.secondlayer
{
background-image: url('450berries2.jpg');
width: 450px;
height: 191px;
border:  solid 2px black;
margin: 0 auto;
padding: 27px 0 0;
}
.thirdlayer
{
width: 330px;
height: 164px;
border: solid 2px black;
background: white;
margin: 0 auto;
}
.thirdlayer img
{
float: left;
}
.thirdlayer p
{
display: inline;
text-align: left;
float: right;
width: 130px;
height: 144px;
padding: 10px;
}

[Dr John]

Thanks for that - I'll pass on the advice.

[Paul O'B]

To explain a little further about margin collapse

Vertical adjacent margins will collapse between adjacent blocks and even with their children. This is the way that the specs define it and the way that most browsers will apply it. IE (including IE7) will also collapse the margins in the same way if the elements concerned do not have "a layout" (see faq on haslayout).

However most of the times designers are unaware of this because the elements concerned often have widths (which sets "haslayout" to be true) and they think that IE's non-collapsing behavior is the correct one.

Incidentally this is the same behaviour we get from other browsers if overflow with a value other than visible is used. When overflow:auto is added to the element then margin collapse does not take place.

Of course, adding overflow is not the best course of action and simply adding a padding or border will stop the margin collapse altogether.

Here is a short demo:

http://www.pmob.co.uk/temp/collapsing-margin-demo.htm

[SRD]

Thank you gentlemen, most informative, but I seem to have a definition problem here, which margins are the horizontal ones and which the vertical? I have been assuming that vertical margins run vertically and horizontal margins run horizontally, but the demo posted by Paul O'B suggests that vertical margins are those above and below and horizontal ones are to the left and right.

[Paul O'B]

Hi,

I have been assuming that vertical margins run vertically and horizontal margins run horizontally, but the demo posted by Paul O'B suggests that vertical margins are those above and below and horizontal ones are to the left and right.

Aren't you saying the same thing in both of those statements?

Vertical margins are those margins that will affect the vertical (up and down) alignment of an element.

Horizontal margins will affect the horizontal position of the element (e.g. move it left or right depending on the values set)

I don't think I see what the difference is from what you were saying

[Tyssen]

He's thinking in terms of lines (kinda like invisible borders) rather than the direction of the margin, so a margin that runs from right to left appears to be horizontal cos that's the orientation of the line from which the margins emerge.

[SRD]

Got it in one Tyssen. I see now that it's a matter of from where you are looking at the situation, you lot see it as a technical point and how the setting affects things like alignment, I see (saw) it from an end product which, as Tyssen suggested, involves the direction in which the 'lines' run. Now, am I the only idiot or is this one of the reasons why margin collapse is so difficult to get ones head round?

[Paul O'B]

I've never seen it any other way and margins have always been one of the most intuitive properties of CSS to me (excluding margin collapse which is not really that complicated once you see the demo) .