442043 - CSS Problem: CSS first-letter pseudo-class makes wrong length

Status: RESOLVED DUPLICATE of bug 385615

(Core :: Layout: Block and Inline, defect)

Description

[Jonathan Huet]

User-Agent:       Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0

It's a CSS/ style representation/format error.
I'm doing a horizontal menu(<ul>), with first letter of each menu option <li> is in upper case. I make these using the first-letter CSS's class. But the length of each "tab"(menu option) is incorrect.



Reproducible: Always

Steps to Reproduce:
Please go to the URL. You can see a demo and a possible explanaition
Actual Results:  
The tabs that had the "first" class, had wrong length, too much long. There is blank spaces bettween "With first letter class" and the next tab.

Expected Results:  
No blank spaces between tabs, like firefox 2

Please, view the URL to get some possible explaination of this error.
And you make a good job for Firefox 3

Comment 1

[Jonathan Huet]

Attachment: The demo code for the error. It's the same content of the url

Comment 2

[philippe (part-time)]

The oldest build showing the behaviou: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.9a1) Gecko/20061208 Minefield/3.0a1

--> bug 300030

Comment 3

[Jesse Ruderman]

This bug looks a lot like bug 385615, but that bug is marked as being a regression from nsTextFrameThebes and this one is marked as being a regression from reflow branch.  Hmm.

Comment 4

[philippe (part-time)]

(In reply to comment #3)
> This bug looks a lot like bug 385615, but that bug is marked as being a
> regression from nsTextFrameThebes and this one is marked as being a regression
> from reflow branch.  Hmm.

There is a difference though: the dynamic change in width (upon clicking on the button). The extra width with ::first-letter is older than bug 385615 (more visible in attachment.cgi?id=318183, the div test case in bug 385615).

Comment 5

[j.j.]

Attachment: testcase 2 (simplified)

Comment 8

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

I think the way to fix this is via bug 365131.

Comment 10

[Daniel.S]

See bug 433724 attachment 358699 [details]

From bug 433724 comment #3
> The width of the absolutely positioned element is miscalulated. The
> miscalculation is based on two factors: The length of the text and the
> font-size of the ::first-letter.
> 
> If the ::first-letter is smaller than 1em, the text is positioned outside the
> box (in other words, the absolutely positioned element's width shrinks).
> font-sizes above 1em let the box grow in width.

Comment 11

[Ronan Amicel]

I was hurt by the same problem (still broken in Firefox 5.0 beta).

It makes :first-letter unusable to implement capitalization.