IE7 vs FF

[KiwiBrian]

Could anyone look at the following page:-

http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html

And explain why:-
(1) FF 2.0.0.8 has the expected 30 px padding within the outer wrapper
(10 px of wrapper padding plus 20 px of box margin) but the inner boxes are
left-aligned rather than being centered.
(2) IE6 and IE7 has the expected 30 pix of top padding within the outer
wrapper, but only 20 px of bottom padding.

Many thanks for any comments.

 

[Harlan Messinger]

Could anyone look at the following page:-

http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html

And explain why:-
(1) FF 2.0.0.8 has the expected 30 px padding within the outer wrapper
(10 px of wrapper padding plus 20 px of box margin) but the inner boxes are
left-aligned rather than being centered.

Firefox requires that the left and right margins be able to adjust
themselves--that is, auto. You told it to use 20px.

 

[KiwiBrian]

Firefox requires that the left and right margins be able to adjust
themselves--that is, auto. You told it to use 20px.

Thanks Harlan, you have completely cleared up that point, and I can see the
sense of it.
When the inner boxes are given a horizontal margin of "auto" FF behaves as
expected.

Now to clear up why the extra 10 pixels of wrapper bottom padding is
occurring....

 

[dorayme]

Could anyone look at the following page:-

http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html

And explain why:- IE6 and IE7 has the expected 30 pix of
top padding within the outer wrapper, but only 20 px of
bottom padding.

It is not quite accurate to say "the expected 30 pix of top
padding within the outer wrapper".

Your "wrapper" has a top padding of 10px, while the "container"
has a top margin of 20px. But, fair enough, you are meaning that
there is 30px between the inside of the green border at the top
and the outside of the top black border of the first contained
div. And, expected, ditto, at the bottom.

On my Winbox, IE 6 is showing your page exactly as in FF as far
as my eye can tell? The bottom gap between the outside of the
bottom border of the bottom contained rectangle and the top of
the bottom green border of the pink wrapper looks to be the same
as the corresponding at the top.

I do not know about IE 7 though?

 

[KiwiBrian]

It is not quite accurate to say "the expected 30 pix of top
padding within the outer wrapper".

Your "wrapper" has a top padding of 10px, while the "container"
has a top margin of 20px. But, fair enough, you are meaning that
there is 30px between the inside of the green border at the top
and the outside of the top black border of the first contained
div. And, expected, ditto, at the bottom.

On my Winbox, IE 6 is showing your page exactly as in FF as far
as my eye can tell? The bottom gap between the outside of the
bottom border of the bottom contained rectangle and the top of
the bottom green border of the pink wrapper looks to be the same
as the corresponding at the top.

I do not know about IE 7 though?

Thanks D.
I have just checked my html again and also re-upoaded it to eliminate
possible confusion.
My IE7 and IE6 are both displaying only 20 px between the inside of the
green border at the top and the outside of the top black border of the first
contained div.
However FF displays 30 px.
They all display 30 px at the corresponding bottom location.
I would love an explanation that makes any sort of sense.
Brian

 

[dorayme]

Thanks D.
I have just checked my html again and also re-upoaded it to eliminate
possible confusion.
My IE7 and IE6 are both displaying only 20 px between the inside of the
green border at the top and the outside of the top black border of the first
contained div.
However FF displays 30 px.
They all display 30 px at the corresponding bottom location.
I would love an explanation that makes any sort of sense.
Brian

OK, I can see the bigger gap (I think I better change the res on
my winbox screen!) now, sorry. New arrangement and the screen is
further (than my Mac screens) away from me...)

In spite of a proper doctype and all. All I can say is that IE
does some strange things with padding and margins that are not as
laid down in the recommended rules at W3C. Someone may have a
more detailed general explanation that shows a consistent rule
for IE? I know this though, it is easy enough to be rid of by
making a rule that IE only can see, to make IE6 and 7 add an
extra 10px at the top where you want by adding 10px top margin
*just* to the first of your three contained divs. You can do this
via a conditional that only IE (6 and 7) can see.

If it was just IE 6, this would do it I think:

* html .firstContainer {margin-top: 30px;} at the end of your css
and in the html for the first conatiner:

<div class="container firstContainer">

 

[Ben C]

[...]
I have just checked my html again and also re-upoaded it to eliminate
possible confusion.
My IE7 and IE6 are both displaying only 20 px between the inside of the
green border at the top and the outside of the top black border of the first
contained div.
However FF displays 30 px.
They all display 30 px at the corresponding bottom location.
I would love an explanation that makes any sort of sense.

It's just a bug in IE, which isn't too surprising as it's full of bugs.

It should be 30px, because there is 10px of top padding on the container
plus 20px of top margin on the thing inside it. Plenty of borders around
the place, so no margin collapsing going on. Margins do not collapse
with borders.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Tue, 30 Oct 2007 23:51:08
GMT KiwiBrian scribed:

My IE7 and IE6 are both displaying only 20 px between the inside of
the green border at the top and the outside of the top black border of
the first contained div.
However FF displays 30 px.
They all display 30 px at the corresponding bottom location.
I would love an explanation that makes any sort of sense.
Brian

Yeah, I played with it quite a bit trying to find an "elegant" workaround,
but it's just like Ben C. said: a bug. I'd try something like dorayme
suggested. Conditional Comments are usually a decent fix.

 

[KiwiBrian]

Well bust mah britches and call me cheeky, on Tue, 30 Oct 2007 23:51:08
GMT KiwiBrian scribed:


Yeah, I played with it quite a bit trying to find an "elegant" workaround,
but it's just like Ben C. said: a bug. I'd try something like dorayme
suggested. Conditional Comments are usually a decent fix.

Thanks Ben and N. I was just trying to get a handle on the logic of the
situation but am "happy" now that the groups heavyweights have confirmed
that it is just a bug and there is nothing specific to be learned from the
example.
IEx seems to be buggy in various ways when a padding butts up against a
margin.
So far my tests have indicated that with a strict doctype, IE6 and IE7 seem
to be consistent in (mis)behaving in similar ways.
Brian.