Items aligning left instead of centering

[Phester]

Hello monsters of CSS. I was wondering if you could help me with a
layout problem.

Here's a test page that demonstrates the problem:

http://64.142.13.246/ls/test.htm

(I've given the DIVs height and color to make it obvious what contains
what. In the evenual working application they would be invisible.)

In IE, the div with id "centerContainer" (dark grey) is properly
centered in the document window. In Mozilla, that div is aligned left,
bringing everything it contains over to the left.

The CSS styles are embedded in the document for convenience here, but
normally I'd import them.

Any help with this would be greatly appreciated!

Thanks,

Phester

[Nick Theodorakis]

On Sun, 26 Oct 2003 00:53:33 GMT, Phester
<ph*****@nonexistenthost.com> wrote:

Hello monsters of CSS. I was wondering if you could help me with a
layout problem.

Here's a test page that demonstrates the problem:

http://64.142.13.246/ls/test.htm

(I've given the DIVs height and color to make it obvious what contains
what. In the evenual working application they would be invisible.)

In IE, the div with id "centerContainer" (dark grey) is properly
centered in the document window.

[...]

Actually, IE is in error. It appears that you have given the
surrounding container (<div id="pageWide">) the declaration of
"text-align: center" to try to center the <div id="centeredContainer">
within it. Actually, that is not supposed to center a block, but
rather, it should center inline content such as text. What you should
do is set the left and right margins of the #centeredContainer to
"auto" which will center a block in conforming browsers such as
Mozilla.

For more details, see:

<http://theodorakis.net/blockcenter.html>

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[Phester]

Nick Theodorakis wrote:

On Sun, 26 Oct 2003 00:53:33 GMT, Phester
<ph*****@nonexistenthost.com> wrote:

Hello monsters of CSS. I was wondering if you could help me with a
layout problem.

Here's a test page that demonstrates the problem:

http://64.142.13.246/ls/test.htm

(I've given the DIVs height and color to make it obvious what contains
what. In the evenual working application they would be invisible.)

In IE, the div with id "centerContainer" (dark grey) is properly
centered in the document window.

[...]

Actually, IE is in error. It appears that you have given the
surrounding container (<div id="pageWide">) the declaration of
"text-align: center" to try to center the <div id="centeredContainer">
within it. Actually, that is not supposed to center a block, but
rather, it should center inline content such as text. What you should
do is set the left and right margins of the #centeredContainer to
"auto" which will center a block in conforming browsers such as
Mozilla.

For more details, see:

<http://theodorakis.net/blockcenter.html>

Nick

Thanks a lot. That's a huge help. I haven't had time to try it out yet,
but I will and I'll check out your article.

Phester