Closed Bug 35348 Opened 24 years ago Closed 24 years ago

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

Categories

(Core :: Layout, defect, P3)

Product:
Core
Component:
Layout
Platform:
x86
All
Type:
defect

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: graf, Assigned: troy)

References

(
URL
)

Details

See http://www.mricon.com/bugzilla/css.htm 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.
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">
Status: UNCONFIRMED → RESOLVED
Closed: 24 years ago
Resolution: --- → INVALID
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?
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
www-style@w3.org 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. ;)
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. 
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.
</div>
</div>

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
"invalid".
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.
Status: RESOLVED → VERIFIED
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.