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

re: div position differences in IE6 vs. Mozilla

ps <ps@invalid.com> wrote:
[color=blue]
>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[/color]

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@pugh.net> <http://steve.pugh.net/>

re: div position differences in IE6 vs. Mozilla

ps <ps@invalid.com> wrote:
[color=blue]
>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[/color]

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@pugh.net> <http://steve.pugh.net/>

re: div position differences in IE6 vs. Mozilla

ps <ps@invalid.com> wrote:
[color=blue]
>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[/color]

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@pugh.net> <http://steve.pugh.net/>

re: div position differences in IE6 vs. Mozilla

ps <ps@invalid.com> wrote:
[color=blue]
>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[/color]

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@pugh.net> <http://steve.pugh.net/>

re: div position differences in IE6 vs. Mozilla

Steve Pugh wrote:[color=blue]
> ps <ps@invalid.com> wrote:
>
>[color=green]
>>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[/color]
>
>
> 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
>[/color]
This fixed it thanks.

re: div position differences in IE6 vs. Mozilla

Steve Pugh wrote:[color=blue]
> ps <ps@invalid.com> wrote:
>
>[color=green]
>>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[/color]
>
>
> 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
>[/color]
This fixed it thanks.

re: div position differences in IE6 vs. Mozilla

Steve Pugh wrote:
[color=blue]
> ps <ps@invalid.com> wrote:
>
>[color=green]
>>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[/color]
>
>
> BTW, the appearance in Opera is totally different to either IE or
> Mozilla. Probably something to do with the display: inline-block;[/color]

I took inline-block out and it looks ok in Opera. Thank you.[color=blue]
>
> And do you mean to trigger quirks mode?[/color]

No. Where did I do that?
[color=blue]
>
> Steve
>[/color]

re: div position differences in IE6 vs. Mozilla

Steve Pugh wrote:
[color=blue]
> ps <ps@invalid.com> wrote:
>
>[color=green]
>>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[/color]
>
>
> BTW, the appearance in Opera is totally different to either IE or
> Mozilla. Probably something to do with the display: inline-block;[/color]

I took inline-block out and it looks ok in Opera. Thank you.[color=blue]
>
> And do you mean to trigger quirks mode?[/color]

No. Where did I do that?
[color=blue]
>
> Steve
>[/color]

re: div position differences in IE6 vs. Mozilla

ps <ps@invalid.com> wrote:[color=blue]
>Steve Pugh wrote:
>[color=green]
>> And do you mean to trigger quirks mode?[/color]
>
>No. Where did I do that?[/color]

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@pugh.net> <http://steve.pugh.net/>

re: div position differences in IE6 vs. Mozilla

ps <ps@invalid.com> wrote:[color=blue]
>Steve Pugh wrote:
>[color=green]
>> And do you mean to trigger quirks mode?[/color]
>
>No. Where did I do that?[/color]

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@pugh.net> <http://steve.pugh.net/>