Prev: How to wrap text in <p> tag if the text has no spaces and is very long
Next: Centering again
From: Ben C on 1 Apr 2008 14:39
On 2008-03-31, Dave Rado <dave.rado(a)dsl.pipex.com> wrote:
[...]
> I'm still confused about some aspects of this. If you look at the last
> mock-up I posted in the previous thread you helped me with ("Is it
> possible to vertical align in a div?", and the mock-up at
> http://tinyurl.com/2otuph)

That URL expands to
http://localhost/swindle/Dev/Mockups/PosNotRelativeProb.htm
From: Dave Rado on 1 Apr 2008 17:02
Hi Ben

On 1 Apr, 19:39, Ben C <spams...(a)spam.eggs> wrote:
> That URL expands tohttp://localhost/swindle/Dev/Mockups/PosNotRelativeProb.htm

Whoops, sorry, I meant http://tinyurl.com/2j68p3 .

To save you looking up my previous post again, it should have read:

I'm still confused about some aspects of this. If you look at the last
mock-up I posted in the previous thread you helped me with ("Is it
possible to vertical align in a div?", and the mock-up at
http://tinyurl.com/2j68p3), 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?

***

Apologies again.

Dave
From: Ben C on 1 Apr 2008 17:27
On 2008-04-01, Dave Rado <dave.rado(a)dsl.pipex.com> wrote:
> Hi Ben
>
> On 1 Apr, 19:39, Ben C <spams...(a)spam.eggs> wrote:
>> That URL expands tohttp://localhost/swindle/Dev/Mockups/PosNotRelativeProb.htm
>
> Whoops, sorry, I meant http://tinyurl.com/2j68p3 .
>
> To save you looking up my previous post again, it should have read:
>
> I'm still confused about some aspects of this. If you look at the last
> mock-up I posted in the previous thread you helped me with ("Is it
> possible to vertical align in a div?", and the mock-up at
> http://tinyurl.com/2j68p3), 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?

This is quite a tricky one. TopOfPageIcons has zero height, and no
borders or padding (the only thing in it is the absolutely positioned
images, and they don't give it any height).

That means that margins collapse _through_ it. The complete set of
margins that collapse here are: body's top margin (0), the top and
bottom margins of TopOfPageIcons (both 0), and the top margin of
DocumentPage (83px).

That lot results in <body> getting a resultant top margin of 83px (which
you can't see because for reasons discussed elsewhere, body's background
colour ends up on the canvas instead). This is what puts TopOfPageIcons
83px from the top.

If you add height: 1px to the styles for TopOfPageIcons it prevents
margins collapsing through it, and so your icons move right up to the
top of the page.

CSS 2.1 8.3.1:

If the top and bottom margins of a box are adjoining, then it is
possible for margins to collapse through it. In this case, the
position of the element depends on its relationship with the other
elements whose margins are being collapsed. If the element's margins
are collapsed with its parent's top margin, the top border edge of
the box is defined to be the same as the parent's.

I doubt all browsers will get this right, although I think Firefox is.
But this was just one of your intermediate versions I think anyway?
From: Dave Rado on 1 Apr 2008 18:26
On 1 Apr, 22:27, Ben C <spams...(a)spam.eggs> wrote:


> This is quite a tricky one. TopOfPageIcons has zero height, and no
> borders or padding (the only thing in it is the absolutely positioned
> images, and they don't give it any height).
>
> That means that margins collapse _through_ it. The complete set of
> margins that collapse here are: body's top margin (0), the top and
> bottom margins of TopOfPageIcons (both 0), and the top margin of
> DocumentPage (83px).
>
> That lot results in <body> getting a resultant top margin of 83px (which
> you can't see because for reasons discussed elsewhere, body's background
> colour ends up on the canvas instead). This is what puts TopOfPageIcons
> 83px from the top.

Thanks, that makes sense. It's very complicated to work out all the
permutations though!


> But this was just one of your intermediate versions I think anyway?

Yes I'm not using that version now, but just wanted to illustrate why
I was still confused about the principles you'd explained earlier.

Thanks again.

Dave
First  |  Prev  | 
Pages: 1 2
Prev: How to wrap text in <p> tag if the text has no spaces and is very long
Next: Centering again