div position differences in IE6 vs. Mozilla

I can't figure out why the yellow boxes are inside the gray div area in
IE6, but not in Mozilla/Firebird. Any suggestions would be appreciated.
I want the page to appear as it does in IE6.

Here is the page with the layout and html:

http://www.cyberplasm.com/temp/HTMLPage1.htm

ps <ps (AT) invalid (DOT) com> wrote:

I can't figure out why the yellow boxes are inside the gray div area in
IE6, but not in Mozilla/Firebird. Any suggestions would be appreciated.
I want the page to appear as it does in IE6.

Here is the page with the layout and html:

http://www.cyberplasm.com/temp/HTMLPage1.htm

Because float removes the element from the normal flow. Hence the
contentarea has no content and hence has no height. Add an element
with clear: left; after the last floated element.

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/>

ps <ps (AT) invalid (DOT) com> wrote:

I can't figure out why the yellow boxes are inside the gray div area in
IE6, but not in Mozilla/Firebird. Any suggestions would be appreciated.
I want the page to appear as it does in IE6.

Here is the page with the layout and html:

http://www.cyberplasm.com/temp/HTMLPage1.htm

BTW, the appearance in Opera is totally different to either IE or
Mozilla. Probably something to do with the display: inline-block;

And do you mean to trigger quirks mode?

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/>

Steve Pugh wrote:

ps <ps (AT) invalid (DOT) com> wrote:


I can't figure out why the yellow boxes are inside the gray div area in
IE6, but not in Mozilla/Firebird. Any suggestions would be appreciated.
I want the page to appear as it does in IE6.

Here is the page with the layout and html:

http://www.cyberplasm.com/temp/HTMLPage1.htm


Because float removes the element from the normal flow. Hence the
contentarea has no content and hence has no height. Add an element
with clear: left; after the last floated element.

Steve

This fixed it thanks.

Steve Pugh wrote:

ps <ps (AT) invalid (DOT) com> wrote:


I can't figure out why the yellow boxes are inside the gray div area in
IE6, but not in Mozilla/Firebird. Any suggestions would be appreciated.
I want the page to appear as it does in IE6.

Here is the page with the layout and html:

http://www.cyberplasm.com/temp/HTMLPage1.htm


BTW, the appearance in Opera is totally different to either IE or
Mozilla. Probably something to do with the display: inline-block;

I took inline-block out and it looks ok in Opera. Thank you.

And do you mean to trigger quirks mode?

No. Where did I do that?

Steve

ps <ps (AT) invalid (DOT) com> wrote:

Steve Pugh wrote:

And do you mean to trigger quirks mode?

No. Where did I do that?

When you included the HTML 4.0 Transitional doctype. If you want to
trigger standards mode include a more appropriate doctype. See for
example http://www.hut.fi/u/hsivonen/doctype.html or one of the many
other pages on this subject.

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/>