First off, in the future, the mailing list css-discuss is generally a
better place for these questions. This newsgroup is really supposed to
for Mozilla programming discussion, not web developer discussion.
That said, you're running into two distinct overlap issues. The first
is caused by setting the heights of "a" and "c" explicitly to a height
which is too small. This makes the children overflow, and specifically
makes "a"'s child's border overlap the scrolling div.
The way height works in CSS, it does not include borders. Therefore, if
you use "height: 100%; border: solid 8px", you're inner div is going to
be 16px taller than its parent (assuming the parent has a fixed height).
Adding margins to make it look right is correct, but a bit messy. I'd
just put the border on "b".
Note that using quirks mode for serious CSS is usually a bad idea; it
makes things more difficult to understand. There's also an issue in IE6
you should be aware of that makes blocks grow if they don't fit their
children, rather than overflowing.
-Eli
Mike Cowperthwaite wrote:
I hope it's OK to include this attachment.
This file is a proof-of-concept for three vertically stacked outer DIVs
with the middle DIV using a scrolled overflow. It seems that the
overflow won't work unless the DIV is floated or positioned. I want to
avoid absolute positioning; I see this same behavior whether I'm using
position:relative on the middle DIV, or float on the middle DIV plus
clear on the top and bottom ones.
The problem is, it seems, the borders on the inner DIVs are somehow
causing an overlap of the outer ones, such that the edges of the actual
content (within the borders) are flush. This is highly
counterintuitive, and baffling. The whole reason I'm using outer plus
inner DIVs is so I can control the DIV heights in the outer ones without
worrying about the interaction of padding or borders on the box model.
I can fix it by adding top & bottom margins, each equal to the combined
height of the borders, to the middle (outer) DIV. This attachment is
strict but I see the same behavior in quirks mode. In Opera 9.10, I see
the same behavior in strict mode; in quirks, Opera places the DIVs per
my expected behavior, with the edges of the outer DIVs flush. In quirks
mode, IE6 doesn't handle the height/overflow of the inner DIV, but in
quirks or strict, it aligns the DIVs as I expect. Which means, if I add
the margins, then Opera (in quirks) and IE6 (in both modes) have a gap
between the DIVs.
I know, I can use a strict DTD plus an IE quirk to add the margin, and
that will let this work OK. But can anyone explain just why the margins
are necessary in the first place?
------------------------------------------------------------------------
Top DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Content DIV
Bottom DIV
_______________________________________________
dev-tech-layout mailing list
[email protected]
https://lists.mozilla.org/listinfo/dev-tech-layout
