[thelist] overflow: auto/scroll

Thu Apr 18 11:26:13 CDT 2002

> -----Original Message-----
> From: aardvark [mailto:roselli at earthlink.net]
>
> > correctly.  not really.  nn6 is implying a width on the pre block that
> > isn't specified.  imo, ie is doing the correct thing, not nn6.
>
> <pre> is block level and should extend to the edge of the
> document, or the edge of viewport... right?
> why would it need a width?
> ...
> using the 98%, IMO, isn't necessarily correct and feels like
> a hack... as a block-level element, it should behave by
> extending to the edge of the page if the page content is
> wider than the viewport, otherwise to the edge of the
> viewport...

This seems to boil down to different interpretations of the body element and
its assumed width. A block level element doesn't extend to the edge of the
*viewport*, it extends to the edge of the *body*. It just so happens that,
in most normal pages, they are one and the same. But if you have an element
(like a too-big image or a <pre>) that extends past the viewport, the
different browsers behave differently. IE extends the <body> element out the
the right as far is it needs to go to surround the offending content.
Mozilla keeps the body at the width of the viewport, and shoves the content
out into the void. You can see this by setting a border for the <body>
element, and viewing a page with horizontal scroll.

How does this affect overflow? The CSS2 spec for overflow: says
  "A block-level box is too wide for the containing block. This may happen
  when an element's 'width' property has a value that causes the generated
  block box to spill over sides of the containing block."
Now, in this case, what's the "containing block"? The <body> element. (Or,
on aardvarks's page, a <div> without a set width, which will expand to the
width of the <body>) So, setting overflow: scroll on the <pre> will make any
content that's *outside the body* scroll. But in IE, the body element has
been streched, so the entire <pre> is still inside the body. Hence, no
scroll. Putting width: 98% on the <pre> forces it to fit in the viewport,
and now the offending content is spilling outside the body. In Mozilla, the
body and the viewport are one and the same, so you always get the scroll.

Now, which interpretation is "correct"? I'm staying out of that one.