142586 - Stylesheet's text-align: right aligning to the left in TR's

Status: VERIFIED INVALID

(Core :: Layout: Tables, defect)

Description

[Adam Hooper]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.0rc1)
Gecko/20020417
BuildID:    2002041711

The page at http://www.adamhooper.com:4242/misc/mozilla.html is an example of
this problem - it is easily reproduceable. I haven't had much time to test, but
half an hour reveals this:

If you have a <table width=500><tr
align="right"><td><table><tr><td>blah</td></tr></table></td></tr></table>  the
table will be 500 pixels wide and the cell with "blah" will be aligned to the
right, as it should be. However, change the <tr align="right"> to "<tr
style='text-align: right;'>" and all of a sudden it'll align to the LEFT. (Set a
CSS property for TD's of border: 1px solid black to ease debugging).

However, if you leave text-align: right in the <tr> and change the <td>'s style
to text-align: right;, it'll STILL align to the left. In my [brief] testing, it
seems that setting text-align to anything simply aligns the text to the left.

Hope I've been descriptive enough :).

Reproducible: Always
Steps to Reproduce:
Draw the following HTML:

<table width=500><tr style="text-align:
right;"><td><table><tr><td>Blah</td></tr></table></tr></td></table>

Actual Results:  The "Blah" shows up on the left.

Expected Results:  The "Blah" should be in a <td> which is aligned to the right
of the table, around 500 pixels from the left.

Hehe, one last time...

Working properly:
<table width=500><tr
align="right"><td><table><tr><td>Blah</td></tr></table></tr></td></table>

Doesn't work:
<table width=500><tr style="text-align:
right;"><td><table><tr><td>Blah</td></tr></table></tr></td></table>

Comment 1

[Boris Zbarsky [:bzbarsky]]

Actually, text-align:right aligns _text_ to the right just fine.  The problem is
that tables are not text -- they are block-level elements.  If you want to
right-align a table, you want to set margin-left:auto on the table you're
aligning (that would be the inner table in this case).

align="right" is not even close to being equivalent to text-align:right, as you
noticed, since align="right" has to be backwards-compatible with NS4/IE4/5,
whereas text-align:right has to comply with the CSS2 spec.

See bug 11384 and bug 49274 for more discussion on this issue (those are about
text-align:center, but the same principle applies here).

Marking invalid, since the layout is correct.

Comment 2

[Hixie (not reading bugmail)]

VERIFIED INVALID; text-align and align="" are completely different beasts.