01 This is a test!
02 This is a test!
03 This is a test!
The above is the original example.
The author said:
Now why won't the content 2nd & 3rd boxes align with the 1st box in Mac IE 5.2.1?
Resizing the window doesn't help this.
The Answer is, we don't know for sure. Observe that if we repeat the example, it displays correctly!
01 This is a test!
02 This is a test!
03 This is a test!
This leads to believe that IE 5.x for Mac gives the first block element with an intrinsic margin-top (eg H1, P) a margin-top of zero if it is the first element of that type in the body. This makes sense if you want to put a header or a paragraph at the top of the page: you wouldn't want a blank line above it, so IE assigns it a margin-top of zero. Unfortunately, this creates a problem here.
How to avoid this? A structurally correct way is to explicitly define the margin-top property for the H1 elements in this example.
h1 { margin-top: 1em; }
This will override the zero margin that IE would normally assign the first H1, and keep all three boxes of text aligned.
The End
Unless... you want to understand more about padding, borders and bleeding margins. In that case, this is a good example to play around with. You may recall that margins bleed through non-bordered, non-padded elements. How so? Examine the following P within a blue container DIV.
Example text is here.
Notice that, although P elements normally have an intrinsic upper and lower margin, this one appears to have none. The upper edge of the DIV is flush with the top of the text, and the lower edge is flush with the bottom. If we give the P a yellow background, it covers the blue DIV entirely:
Example text is here.
Why does this happen? According to the W3C specs, since the DIV has neither border nor padding, the margin of the paragraph will bleed through the edge of the DIV and affect object outside of it. Hence in our example the DIV adopts the margins of the P within it and acts like a normal paragraph, with one blank line above and below it. How do we know that the margin of the P hasn't just disappeared? Let's add a black border to the DIV, all other things being equal:
Example text is here.
Aha! The margins of the P now stay within the DIV, and the blue background of the DIV is revealed. But didn't I say "non-bordered, non-padded"? Indeed, I did. Lets try that again, without the border but with one pixel of padding:
Example text is here.
And we see that it's the same effect as having a border: the margins stay within the blue DIV.
Based on the examples above, what do we predict to happen when we remove the padding and border of our three boxes? We expect the margin of the H1 headers to bleed through the margin of the top of the page, but will IE turn them to zero? click here