Problems with handling text-align in CSS (block elements are not aligned)




17 years ago
17 years ago


(Reporter: Konstantin Riabitsev, Assigned: troy)



Firefox Tracking Flags

(Not tracked)





17 years ago
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

17 years ago
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">
Last Resolved: 17 years ago
Resolution: --- → INVALID

Comment 2

17 years ago
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.
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

17 years ago
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

17 years ago
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

17 years ago
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

17 years ago
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
Verified invalid.

Comment 9

17 years ago
Kudos for the Mozilla team! Drinks are on me. ;)
OK, I'll forward this to http://bugzilla.micr.... Oh, wait... ARGGG!
You need to log in before you can comment on or make changes to this bug.