floats mess up backgrounds and lists

http://www.frostjedi.com/terra/scrip...ackground.html

In Internet Explorer, the background works as desired. In FireFox,
however, the red background of "menu" is covering up the background of
"main".

Also, lists are not being displayed as desired in either. I'd like
the bullets to appear outside of "menu", but they don't. In FireFox,
they display inside of "menu" and in Internet Explorer, they don't
appear at all (or if they do, they appear under "menu").

Any ideas as to how I can achieve the desired effects?

yawnmoth wrote:

http://www.frostjedi.com/terra/scrip...ackground.html

In Internet Explorer, the background works as desired. In FireFox,
however, the red background of "menu" is covering up the background of
"main".

IE is violating the specs here.

From CSS 2.1 § 9.5 Floats:

Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float didn't
exist. However, line boxes created next to the float are shortened to
make room for margin box of the float....

The div's background is part of the div itself, which acts as if the
float doesn't exist for positioning purposes, and the menu thus goes on
top of the background.

Also, lists are not being displayed as desired in either. I'd like
the bullets to appear outside of "menu", but they don't. In FireFox,
they display inside of "menu" and in Internet Explorer, they don't
appear at all (or if they do, they appear under "menu").

The outer part of the list -- the bullets -- is not a line box and will
be obscured by the float. The individual elements are line boxes and are
thus shunted to the side of the float.

Any ideas as to how I can achieve the desired effects?

Which way is the menu supposed to go? To the left of all or just to the
left of the list? In any case, adding a sufficiently thick margin will
achieve the effects. 9 ems seems to be the right amount.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

On Nov 11, 6:49 pm, Joshua Cranmer <Pidgeo... (AT) verizon (DOT) invalid> wrote:

yawnmoth wrote:
snip

IE is violating the specs here.

From CSS 2.1 § 9.5 Floats:

Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float didn't
exist. However, line boxes created next to the float are shortened to
make room for margin box of the float....

The div's background is part of the div itself, which acts as if the
float doesn't exist for positioning purposes, and the menu thus goes on
top of the background.

Is there any way to change the behavior, none-the-less? Containers,
for example, normally collapse due to floats being outside of the
document flow, but you can, despite that, change that behavior by
using "overflow: hidden".

snip

Which way is the menu supposed to go? To the left of all or just to the
left of the list? In any case, adding a sufficiently thick margin will
achieve the effects. 9 ems seems to be the right amount.

The "menu" div is supposed to be to the left of everything. Also,
adding padding-left: 9em doesn't seem like a very elegant solution
since that requires you the width of the "menu" div in advance. If
the content of the "menu" div were dynamically generated (eg. could
have an arbitrary number of z's or any other character or that
matter), you'd have to somehow auto-calculate padding-left each time,
which seems like an inelegant approach.