Last Comment Bug 35348 - Problems with handling text-align in CSS (block elements are not aligned)
: Problems with handling text-align in CSS (block elements are not aligned)
Product: Core
Classification: Components
Component: Layout (show other bugs)
: Trunk
: x86 All
P3 normal (vote)
: ---
Assigned To: troy
: Chris Petersen
: Jet Villegas (:jet)
Depends on:
  Show dependency treegraph
Reported: 2000-04-10 12:13 PDT by Konstantin Riabitsev
Modified: 2000-04-11 10:04 PDT (History)
0 users
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Description User image Konstantin Riabitsev 2000-04-10 12:13:50 PDT
See for testcase example.

If I define <body style="text-align: center">, all elements within the body
should be center-aligned including block elements, however it's not so in
Mozilla. In the testcase, the <p> should be in the middle of the page, while
it's still aligned to the left (compare with Explorer 5).

True for Linux and Win32 versions.
Comment 1 User image troy 2000-04-10 12:35:27 PDT
The P element explicitly sets text alignment to left

<p style="border-top: 1px solid red; border-bottom: 1px solid red;
color: purple; width: 50%; text-align: left">
Comment 2 User image Konstantin Riabitsev 2000-04-10 12:41:10 PDT
No, that is wrong. The text-align that is within the <p> element is ONLY valid
for whatever is WITHIN the <p> element, and does NOT affect the alignment of the
block element itself. Just to show, I have added the same block with the
text-align WITHIN the <p style=""> declaration removed.

Please handle this with seriousness, as it is crucial that Mozilla does what the
W3C specs say CSS should do! Please reopen the bug.
Comment 3 User image Hixie (not reading bugmail) 2000-04-10 17:12:09 PDT
Um, Mozilla does do what the specs say... Could you quote the exact part of the
specs which you think we are violating?
Comment 4 User image Konstantin Riabitsev 2000-04-10 20:58:54 PDT
Hmm... To be honest, the specs are unclear as to how the block elements should
be handled in this situation. IE5 positions block elements as it does inlines,
but that doesn't necessarily mean that's correct. I have sent an e-mail to mailing list asking to clarify which approach is correct. If
"less-than-100%" block elements shouldn't be affected by the "text-align:"
directive, then you're right, and IE's wrong. ;)
Comment 5 User image troy 2000-04-10 21:49:05 PDT
I think the spec is pretty clear on this. The CSS2 spec when talking about 
text-align says:

"A block of text is a stack of line boxes. In the case of 'left', 'right' and 
'center', this property specifies how the inline boxes within each line box 
align with respect to the line box's left and right sides"

That means the inline boxes are what is aligned and not the block box itself. 
Comment 6 User image Konstantin Riabitsev 2000-04-10 22:07:30 PDT
Yes, that is true. But consider this:

<div id="parent" style="text-align: center; width: 100%">
This is parent content.
<div id="child" style="width: 50%">
This is child content.

The specs only say that every inline element in the "parent" DIV should be
center-aligned. However, it does not specify at all what happens if a block
element is encountered within the parent (in our case the "child" DIV). Explorer
treats such block elements just as it does the inlines and center-aligns them.
Mozilla, however, doesn't do that. I am not sure which one is right, that's why
I am trying to clarify as to which way is correct. If the specs said explicitly
"block-elements should NOT be aligned with inline text", then everything would
be clear, however the specs say nothing about block-elements.

See, the problem is that Explorer shows the page one way, and Mozilla -- the
other. Take the URI I have as a reference -- in Explorer the red box is in the
middle of the page, while in Mozilla it is at the left. I am just wondering
which way is right. If IE is wrong, I'll be happy to verify this bug as
Comment 7 User image troy 2000-04-11 08:34:00 PDT
I think IE is wrong. A block-level element is not an inline-level element and so 
if the rule says "inline boxes within each line box are centered" then it 
doesn't apply to a block-level element.

Section 9.2.1 of the CSS2 spec talks about how block-level elements generate a 
block box. The block box contains inline boxes
Comment 8 User image David Baron :dbaron: ⌚️UTC-8 2000-04-11 09:11:16 PDT
Verified invalid.
Comment 9 User image Konstantin Riabitsev 2000-04-11 10:04:17 PDT
Kudos for the Mozilla team! Drinks are on me. ;)
OK, I'll forward this to http://bugzilla.micr.... Oh, wait... ARGGG!

Note You need to log in before you can comment on or make changes to this bug.