Re: Any Idea for IE and Opera - Its working with Firefox ...

On 2008-03-11, dorayme <doraymeRidThis@xxxxxxxxxxxxxxx> wrote:
In article <slrnftdu9m.ir0.spamspam@xxxxxxxxxxxxxxxxx>,
Ben C <spamspam@xxxxxxxxx> wrote:

On 2008-03-11, dorayme <doraymeRidThis@xxxxxxxxxxxxxxx> wrote:
[...]
Now to matters more curious to me:

The matter of the relation of the body to the html element is an
odd one. It may come as a bit of a surprise to see that saying
nothing about the html element (as often we do not) in the css
*** nevertheless does not prevent it from assuming the colour
specified for the body.

Even when there is no colour in the body because there is no
height to the body, the html takes its cue on colour from its
child in this case:

<http://netweaver.com.au/alt/knut/knut.html>
<http://netweaver.com.au/alt/knut/knut2.html>
<http://netweaver.com.au/alt/knut/knut3.html>

It *looks* like we have here a case of the parent inheriting the
child's property values!

There are special rules for all this, and they're also different for
HTML and XHTML.


And there was I musing about backwards causation...

If the html element's actual background is transparent,

Will you excuse me if I muse aloud some more? I am not opposing
anything you say, I am just thinking through a few issues here.

If it is transparent, what can you see through it? The canvas!
Which is "the space where the formatting structure is rendered."

Does this canvas have a default colour, white?

Usually white, but it depends on the browser. If you set html and body's
background to transparent, you will see the colour of the canvas.

When you specify
the background of body to any different to white, what exactly is
happening? It is somehow "painting the canvas"? What? It paints
the thing behind the html element?

That's the idea. If the html element's background is transparent then
the body's background is applied to the canvas instead.

If you specify the background of the html element, it also paints the
canvas. The canvas is sort of multi-coloured in this picture,
abstractly so, considering elements like body can have different
sizes even within a browsing session.

No you get one or other. If html has a non-transparent background, then
that paints the canvas, html gets a transparent background, and body's
background is just body's background.

In that case, body is just a block that's on top of html (also just a
block), that's on top of the canvas. So you'll see the canvas colour
around the edges of body.

But they recommend for some reason that in HTML documents you leave
html's background alone and set your desired canvas background on body.

It looks like a crazy picture to me involving a pretence of
giving a background colour to elements to make them different to
transparent whereas the picture is one of all elements really
being transparent all along.

Most elements are transparent (background-color's initial value is
transparent).

Specifying backgrounds "to" them is really just a way of telling the
browser to make this rather magical thing, "the canvas" coloured in a
particular way in just those areas that can shine through.

I have had in mind for quite some time a simpler model. There is
no canvas - a least for visual rendering considerations, it is an
unnecessary fiction. The elements are glass layers. You can paint
them or not. There are rules for what shines through what if you
don't.

The point of the canvas is this.

Consider this example:

<div style="width: 200px; height: 200px; overflow: scroll;
background-color: pink">
<div style="width: 300px; height: 100px; background-color: gray;
border: 10px solid green">
</div>
</div>

You can scroll the outer div to find your way to the right edge of the
inner one, and you are apparently accompanied by pink background all the
way. This is the effect everyone wants.

But the truth is the pink square is exactly 200px x 200px and no
bigger. It doesn't move: you're moving the grey div across it.

Now try this:

<div style="width: 200px; height: 200px; overflow: scroll">
<div style="width: 200px; height: 200px; background-color: pink">
<div style="width: 300px; height: 100px; background-color: gray;
border: 10px solid green">
</div>
</div>
</div>

Scroll to the right and you lose the pink background, it moves to the
left along with the other contents of the scrolling container.

This second case is analogous to a browser. The outermost div is the
viewport, and the next div down is the html (root) element. If you set a
background on the html element, you would lose it when you scrolled the
viewport. This would be a problem.

They might have said that the root element's background is applied to
the _viewport itself_, making the second case like the first one, and
meaning you never lost the background when you scrolled. But instead
they said it stays on the root element, but extends infinitely in all
directions, which is another (slightly different) way of ensuring that
you don't lose the background. Hence the concept of the canvas.

The difference is when you use a background image instead of a solid
colour: with a canvas, the image moves with the root element when you
scroll. If the background were put on the viewport, it would always stay
where it was. Effectively background-attachment would always be fixed.
.