23116 - CSS "text-align: center;" Does not center inline-table as it should

Status: RESOLVED WORKSFORME

(Core :: Layout: Tables, defect, P3)

Description

[NathanJM]

Using CSS, Mozilla M13 (1/3/00 release) does not center table when using
"text-align: center;".  According to the CSS recomendation from the W3C, this
should center all block-level elements, which includes tables.

Comment 1

[troy]

No, that's not what the CSS spec says. From 16.2 of the CSS2 spec:

"This property describes how inline content of a block is aligned. Values have
the following meanings: ..."

and later on:

"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; alignment is not with
respect to the viewport."

That says that the inline boxes themselves should be aligned and not the
block-level element.

The "margin-left" and "margin-right" properties both set to "auto" would cause
the block-level element to be centered

Cc'ing David Baron to confirm.

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Agreed.  However, Chris Karnaze has an open bug on possibly changing some of
this for compatibility mode.  Kipp worked on this a long time ago, but it still
isn't quite right.  See bug 7112.

Comment 3

[Chris Petersen]

Marking verified per last comments.

Comment 4

[NathanJM]

Sorry, i failed to mention it was setup as an inline table.

From the CSS2 spec:
http://www.w3.org/TR/REC-CSS2/

17.2 The CSS table model
...
inline-table (In
HTML: TABLE) Specifies that an element defines an inline-level table: it is a
rectangular block that participates in an inline formatting context).
...

9.4.2
Inline formatting context
...
When the total width of the inline boxes on a line
is less than the width of the line box containing them, their horizontal
distribution within the line box is determined by the 'text-align' property. If
that property has the value 'justify', the user agent may stretch the inline
boxes as well.


--Nathan

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Mozilla doesn't support inline-table yet.  See bug 18217.  (Perhaps the symptoms
of that bug have changed.)

Could you attach your test case?

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Were you using 'text-align: center' on the inline-table itself (bug still
invalid) or on its container (valid, if inline-table works)?

Comment 7

[NathanJM]

Attachment: HTML page on which problem occurs

Comment 8

[NathanJM]

Attachment: External Stylesheet used

Comment 9

[NathanJM]

text-align: center;  was used on the container (DIV)

Comment 10

[troy]

Okay, well I'll change the component to HTML Tables and then re-assign it to
Chris.

Once we do support inline tables we can revisit this issue

Comment 11

[karnaze (gone)]

I think that display:inline-table is being mapped to display:table currently 
which might help explain why the url looks ok to me. There may already be a bug 
open on inline tables, but I don't think this bug's test case catches the real 
bug with inline tables.

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

There either is or should be a bug open on text-align: center centering tables. 
So when that's fixed, this'll have to be reopened.

Comment 13

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

But then again, this bug is really an RFE that inline-table should be
implemented...