Prev: How to wrap text in <p> tag if the text has no spaces and is very long
Next: Centering again
From: Dave Rado on 29 Mar 2008 20:34
I've found the answer - the solution is described at http://tinyurl.com/a8u5w
.. It is almost identical to the method I was using but it includes the
following addtional line:

* html #nonFooter {height: 100%;}

With the addtion of this line, it works in all browsers including
IE5.5. I don't understand why it works though - does anyone understand
the significance of the asterix? And of what the difference is between
#nonFooter and * html #nonFooter?

Dave
From: Dave Rado on 31 Mar 2008 18:51
Hi Ben

On 31 Mar, 00:14, Ben C <spams...(a)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 help 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 helpful 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 help 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 helped 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
From: Dave Rado on 31 Mar 2008 19:03
Hi dorayme

On 31 Mar, 02:41, dorayme <doraymeRidT...(a)optusnet.com.au> wrote:

> I find it easy enough to add an IE sheet and conditionally link it in
> the head of the html.

My problem is that I'm finding some conditional css definitions are
needed just for IE5.5, others for IE6 and below, and still others for
IE7 and below, which means a potential requirement for up to three
conditional stylesheets (although Ben has just helped me get rid of
the "IE7 and below" one, unless I encounter another bug that applies
to IE 7 and below).

I'm already using a conditional stylesheet for IE5-specific styles,
but I do like the idea of using the * html hack to obviate the need to
have an "IE6 and below" conditional stylesheet as well; and it would
also be nice if there were a safe and reliable "IE7 and below" hack as
well, in case I find another bug that applies to IE7 and below but not
to IE8 beta.

I take your point about conditionals within the html body being very
useful at times.

Dave
From: dorayme on 31 Mar 2008 20:28
In article
<e46cd5d4-b0d2-4004-9aa1-10dfa8617181(a)i12g2000prf.googlegroups.com>,
Dave Rado <dave.rado(a)dsl.pipex.com> wrote:

> Hi dorayme
>
> On 31 Mar, 02:41, dorayme <doraymeRidT...(a)optusnet.com.au> wrote:
>
> > I find it easy enough to add an IE sheet and conditionally link it in
> > the head of the html.
>
> My problem is that I'm finding some conditional css definitions are
> needed just for IE5.5, others for IE6 and below, and still others for
> IE7 and below,...

Do yourself a big favour, forget about IE below 6. At least don't worry
about them unless they so distort your meaning that great disaster can
ensue. For example you have a fan base among traffic engineers in the
darkest and smallest states of Africa and you know they are using less
then IE 6 and you are outlining your latest traffic management plan...

--
dorayme
From: Ben C on 30 Mar 2008 19:14
On 2008-03-30, Dave Rado <dave.rado(a)dsl.pipex.com> wrote:
[...]
> I've succeeding in getting my footer to stay at the bottom of the
> viewport if the height of the webpage's content's is less than the
> height of the viewport; and in staying at the bottom of the webpage if
> the height of the webpage's content's exceeds the viewport's height;
> by using the method I linked to earlier. See my mock-ups at
> http://tinyurl.com/2urjf2 (short content) and at http://tinyurl.com/393k5n
> (long content). However, in order to get the three icons above my
> "document page" to appear in the correct place in all browsers, I had
> to add the following IE conditional comment:
>
><!--[if lte IE 7]>
> <style type="text/css">
> div.TopOfPageIcons {top: 76px}
> </style>
><![endif]-->
>
> (As opposed to a top value of -8px that is required in all non-IE
> browsers and in IE8 beta, according browsershots.org).
>
> That is, in IE7 and below (but not in IE8), the TopOfPageIcons div is
> positioning itself relative to the top of the webpage; whereas in all
> non-IE browsers, and in IE8, the div is positioning itself relative to
> the top of the DocumenPage div.
>
> Do you have any idea why?

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

> Although I've solved the problem using the
> above conditional comment, any light you can shed on this would almost
> certainly greatly help me in the future when encountering (or better
> still anticipating) similar weird behaviour in the future.
>
> One clue that may help in your investigation: there is a div in those
> mock-ups called "ScrollableContent", which has no assigned properties
> (because its purpose is to be used by an alternative stylesheet, and
> not by this one). Despite the fact that this div has no assigned
> properties, if I delete it, then all non-IE browsers start to behave
> like IE, in the sense that they position the TopOfPageIcons div
> relative to the top of the page, and I then have to define
> div.TopOfPageIcons to have top: 76px in all browsers. I don't
> understand why an undefined div can make such a big difference?

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.

TopOfPageIcons are the first thing inside ScrollableContent and
therefore positioned relative to its top edge.

But if you remove ScrollableContent, then TopOfPageIcons is right inside
body after the menu.

If you put padding-top: 1px on ScrollableContent then you will see the
same effect-- TopOfPageIcons will need to be top: 75px to put it back
where it was.

> But as
> I say, the ScrollableContent div needs to be there, because it's
> defined in an alternative stylesheet.

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

Margin-collapsing is quite tricky which is probably why IE6 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.

It's difficult to explain why without just telling you to read the spec,
but the point is mainly that margin sort of means "gap until the next
solid edge", where a solid edge is a border or padding. If margins
weren't collapsed, then in the example above there'd be a 200px between
the top of the blue div and anything solid, which would be too much.

The bottom margin of a <p> collapsing with the top margin of the <p>
below it is fairly intuitive. A top margin collapsing against a
descendent top margin less so and does sometimes catch people out but
the spec is explicit that this is what's meant to happen.
 |  Next  |  Last
Pages: 1 2
Prev: How to wrap text in <p> tag if the text has no spaces and is very long
Next: Centering again