Posted by kchayka on 07/08/05 19:22

Paul F. Johnson wrote:

> http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?
>
> The problem simple - scroll the window and you will see the text and
> images appearing above (in part) the ChemiCAL header bar.

Per your stylesheet:
#topblock {
height: 160px;
}
#content {
padding-top: 160px;
}

You apparently expect the text in #topblock to stay within the specified
height. That is highly dependent on the actual text and viewport sizes.

When a larger text size than you expect is used, and/or it wraps due to
smaller viewport size, an overflow on #topblock occurs. The padding on
#content does not adjust accordingly and you get overlapping text.

You cannot expect #content to adjust to variables the specs mandate it
must ignore. Abandon the fixed/absolute positioning, leave the elements
staticly positioned and automatically sized, and the problem goes away.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Back to original message]