Re: Positioning and Netscape 7.1

"Neal" <neal (AT) spamrcn (DOT) com> wrote:

http://www.opro.org/newdesign

CSS has the navigation div fixed with a width of 15%. Center section is
absolute, left: 20% width: 50%. Right column is absolute, right: 0 and
width: 25%.

15 + 50 + 25 = 90, right? But Net Nav 7.1 renders it so the middle and right
columns overlap. If I reduce widths of these columns to 45% and 20%
respectively, it works, but in IE it leaves an inordinate amount of space.

How does Nav overlap columns when the total of the %'s (20 left, 50 wide,
and a 25 with right: 0) is only 95%? This SHOULD work, or am I nuts?

You've forgotten to take the margins, borders and padding into
account. Both the center and right hand blocks have 1em of margin all
round, 1px borders all round and 1em of padding all round.

So the total width is now (20%) + (50% + 4em + 2px) + (25% + 4em +
2px). That extra 8em and 4px is likely to be more than 5% of the
window width for most users.

Hence the overlapping in all browsers that calculate the box model
correctly (including IE6 as your doctype triggers standards mode).

My advice:
Don't set margins on the positioned divs. Adjust the left/right
properties instead.
Don't set padding on the positioned divs. Use margin on their contents
instead.
That just leaves 4px of borders, which really should be less than 5%
of the window width in most cases.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>