IE7 vs FF

IE7 vs FF

am 30.10.2007 18:59:27 von 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.

Re: IE7 vs FF

am 30.10.2007 19:21:53 von Harlan Messinger

KiwiBrian wrote:
> 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.

> (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.
>
>

Re: IE7 vs FF

am 30.10.2007 20:00:12 von KiwiBrian

"Harlan Messinger" wrote in message
news:5opb22FntdpeU1@mid.individual.net...
> KiwiBrian wrote:
>> 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.
>
>> (2) IE6 and IE7 has the expected 30 pix of top padding within the
>> outer wrapper, but only 20 px of bottom padding.

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....

Re: IE7 vs FF

am 30.10.2007 22:26:12 von dorayme

In article ,
"KiwiBrian" wrote:

> 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?

--
dorayme

Re: IE7 vs FF

am 31.10.2007 00:51:08 von KiwiBrian

"dorayme" wrote in message
news:doraymeRidThis-897805.08261231102007@news-vip.optusnet. com.au...
> In article ,
> "KiwiBrian" wrote:
>
>> 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?

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

Re: IE7 vs FF

am 31.10.2007 03:10:59 von dorayme

In article ,
"KiwiBrian" wrote:

> "dorayme" wrote in message
> news:doraymeRidThis-897805.08261231102007@news-vip.optusnet. com.au...
> > In article ,
> > "KiwiBrian" wrote:

>
> 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:



--
dorayme

Re: IE7 vs FF

am 31.10.2007 19:16:01 von Ben C

On 2007-10-30, KiwiBrian wrote:
[...]
>>> http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html
[...]
> 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.

Re: IE7 vs FF

am 31.10.2007 19:53:20 von 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.

--
Neredbojias
Just a boogar in the proboscis of life.

Re: IE7 vs FF

am 31.10.2007 20:20:05 von KiwiBrian

"Neredbojias" wrote in message
news:Xns99DA78F05EBB6nanopandaneredbojias@85.214.62.108...
> 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.
>

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.