308032 - right padding does not work inside LI block in rtl mode

Status: RESOLVED DUPLICATE of bug 258928

(Core :: Layout, defect)

Description

[Adam Morrison]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

The referenced page (http://www.cs.tau.ac.il/~adamx/firefox-bug.html) shows how 
the same LI box renders differently when adding 'dir="rtl"'.  In particular, 
padding to the right stops working.

Reproducible: Always

Steps to Reproduce:
You can see the HTML at the URL I gave, but here goes anyway:
1.  Create a style for LI with "padding: 0"
2.  Create a style for A with right padding
3.  Create an UL/LI/A block.  It renders correctly.
4.  Now add dir="rtl" to the UL - the right padding disappears.

Actual Results:  
Instead of seeing the exact same box, on the right side of the screen, you get 
a different box (without right padding) on the right side of the screen.

Expected Results:  
You should get the exact box, just on the right side of the screen.

This is after a plain install.  Nothing special.

Comment 1

[Peter van der Woude [:Peter6]]

you can't have the same id for 2 different UL's (not the cause though)

the cause is display:inline

if you remove that it will look like you want (at least the left and right UL
will look the same)

Comment 2

[Adam Morrison]

(In reply to comment #1)

> you can't have the same id for 2 different UL's (not the cause though)
> the cause is display:inline
> if you remove that it will look like you want (at least the left and right UL
> will look the same)

As you guessed, that was a stripped-down example.  What I was trying to do
was build a navigation bar where the LI appear next to each other.  In that 
case, using "display: inline" kills that effect.  See 
http://www.cs.tau.ac.il/~adamx/firefox-bug2.html for an example.

Comment 3

[Gérard Talbot]

Adam, can you create a *reduced* testcase with a clear PASS or FAILED condition
and then attach it to the bug file using the "Create a New Attachment" link?
Preferably with entirely valid markup code too. You can edit the Comment field
when posting the attachment.

Also, if the URL field has changed, then please update this accordingly.

Comment 4

[Adam Morrison]

Attachment: Reduced test case showing the bug, and problems with proposed workaround

This is a copy of the problem URL, containing a reduced test case.

Comment 5

[Adam Morrison]

(In reply to comment #3)

> Adam, can you create a *reduced* testcase with a clear PASS or FAILED 
condition
> and then attach it to the bug file using the "Create a New Attachment" link?
> Preferably with entirely valid markup code too. You can edit the Comment field
> when posting the attachment.
> Also, if the URL field has changed, then please update this accordingly.

I updated the problem URL and attached a copy of it.  It now validates 
correctly.

PASS condition:  The second set of boxes should look exactly like the first set 
of boxes, just be aligned to the right side of the screen.

The third set of boxes shows why the workaround of not using display:inline is 
not sufficient.

Comment 6

[Simon Montagu :smontagu]

*** This bug has been marked as a duplicate of 258928 ***

Comment 7

[(no longer active)]

Mass-assigning the new rtl keyword to RTL-related (see bug 349193).