PHWinfo - Afficher un message - IE compatible way of forcing footer to bottom of page?

31/03/2008, 23h51

Hi Ben

On 31 Mar, 00:14, Ben C <spams...@spam.eggs> wrote:

> It looks like IE <7 is getting margin-collapsing wrong.

Actually IE <=7 - the first Microsoft Browser to get it right is IE8
beta.

> > One clue that may in your investigation: there is a div in those
> > mock-ups called "ScrollableContent

> This is an important clue.
>
> ScrollableContent's top margin collapses with the top margin of
> DocumentPage. That means that even though ScrollableContent doesn't have
> a top margin set on it, its top edge is 83px lower than it would
> otherwise be.

[....]

> You could give it padding-top: 1px. Then you possibly won't need the
> conditional comment for IE <7 [<=7]

That fixed the problem, many thanks, Ben! I'm glad not to have to have
to import and maintain yet another conditional stylesheet (especially
as I don't know of a safe hack that one can embed in an external
stylesheet equivalent to <=IE&.

> Margin-collapsing is quite tricky which is probably why IE6 [actually IE7 and below] gets it wrong.
>
> If you have a situation like this:
>
> <div style="background-color: green; height: 100px">
> <div style="background-color: blue; height: 90px; margin-top: 100px">
> </div>
> </div>
>
> the top edges of the green and blue divs should end up in the same
> place, each with 100px of margin above them. So the child div moves its
> parent down. This is what's happening on your page.
>
> But if you put top padding or border on the outer div, that stops the
> collapse happening since the two top margins are no longer adjacent but
> separated by the padding or border.

That's a very ful explanation, thanks. I found it even more
revealing to experiment with:

<body style="padding: 0; margin-top: 0">

<div style="background-color: blue; min-height: 50px">
<div style="border: 2px solid black; height: 100px; margin-
top: 100px">
</div>
</div>

</body>

And to then remove and replace the inner div, and to add 1px padding
to the outer div.

> It's difficult to explain why without just telling you to read the spec

Reading the spec doesn't someone like me to understand its subtle
implications. Extrapolating from the box model diagram to some of its
less intuitive implications is something you're far better at than me,
partly, I suspect because of your much greater real world experience
with using it, and partly because we have different talents.

I'm still confused about some aspects of this. If you look at the last
mock-up I posted in the previous thread you ed me with ("Is it
possible to vertical align in a div?", and the mock-up at
http://tinyurl.com/2otuph), in that mock-up there is no div above the
TopOfPageIcons one, and the TopOfPageIcons one is self-contained, it
isn't a wrapper div like the ScrollableContent one; so I would have
expected it to be positioned relative to the top of the page, but it
isn't, it's positioned relative to the DocumentPage div. Can you shed
any light on this?

Dave

31/03/2008, 23h51	#5
Dave Rado Messages: n/a Hébergeur:	Re: IE compatible way of forcing footer to bottom of page? Hi Ben On 31 Mar, 00:14, Ben C <spams...@spam.eggs> wrote: > It looks like IE <7 is getting margin-collapsing wrong. Actually IE <=7 - the first Microsoft Browser to get it right is IE8 beta. > > One clue that may in your investigation: there is a div in those > > mock-ups called "ScrollableContent > This is an important clue. > > ScrollableContent's top margin collapses with the top margin of > DocumentPage. That means that even though ScrollableContent doesn't have > a top margin set on it, its top edge is 83px lower than it would > otherwise be. [....] > You could give it padding-top: 1px. Then you possibly won't need the > conditional comment for IE <7 [<=7] That fixed the problem, many thanks, Ben! I'm glad not to have to have to import and maintain yet another conditional stylesheet (especially as I don't know of a safe hack that one can embed in an external stylesheet equivalent to <=IE&. > Margin-collapsing is quite tricky which is probably why IE6 [actually IE7 and below] gets it wrong. > > If you have a situation like this: > > <div style="background-color: green; height: 100px"> > <div style="background-color: blue; height: 90px; margin-top: 100px"> > </div> > </div> > > the top edges of the green and blue divs should end up in the same > place, each with 100px of margin above them. So the child div moves its > parent down. This is what's happening on your page. > > But if you put top padding or border on the outer div, that stops the > collapse happening since the two top margins are no longer adjacent but > separated by the padding or border. That's a very ful explanation, thanks. I found it even more revealing to experiment with: <body style="padding: 0; margin-top: 0"> <div style="background-color: blue; min-height: 50px"> <div style="border: 2px solid black; height: 100px; margin- top: 100px"> </div> </div> </body> And to then remove and replace the inner div, and to add 1px padding to the outer div. > It's difficult to explain why without just telling you to read the spec Reading the spec doesn't someone like me to understand its subtle implications. Extrapolating from the box model diagram to some of its less intuitive implications is something you're far better at than me, partly, I suspect because of your much greater real world experience with using it, and partly because we have different talents. I'm still confused about some aspects of this. If you look at the last mock-up I posted in the previous thread you ed me with ("Is it possible to vertical align in a div?", and the mock-up at http://tinyurl.com/2otuph), in that mock-up there is no div above the TopOfPageIcons one, and the TopOfPageIcons one is self-contained, it isn't a wrapper div like the ScrollableContent one; so I would have expected it to be positioned relative to the top of the page, but it isn't, it's positioned relative to the DocumentPage div. Can you shed any light on this? Dave