261346 - Improper handling of float: left in FireFox 1.0PR on OSX

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[pocemit]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; rv:1.7.3) Gecko/20040913 Firefox/0.10

The page at http://www.gnaa.us/contact.phtml,
which is supposed to look like http://pbx.mine.nu/contact_ie60sp1.png and looks
so correctly on all FireFox versions on the PC, looks like 
http://pbx.mine.nu/contact_ff10pr.jpg on Mozilla 1.0PR under MacOS X.
Best guess would be failure to properly handle float: left;

Reproducible: Always
Steps to Reproduce:
1. Go to http://www.gnaa.us/contact.phtml using FireFox 1.0PR under Mac OS X

4. Observe the problem doesn't appear.

Actual Results:  
The page renders as shown in http://pbx.mine.nu/contact_ff10pr.jpg 


Expected Results:  
The page should have been looking like http://pbx.mine.nu/contact_ie60sp1.png

Comment 1

[Michael Miller]

I can confirm this bugs validity. I have the same problem on 1.0PR1 on MacOS X.
This page looks well formatted on other browsers, and I assume that was it's
original intent.

Comment 2

[HARUNAGA Hirotoshi]

WFM using Firefox 1.0PR on Mac.
Can you reproduce this without extensions?

Comment 3

[Uri Bernstein]

Attachment: minimal testcase

This might actually be the correct behaviour. Notice that the width of the
containing div is fixed to 800px, and the width of the input box is specified
as size="80". Given that the div cannot accomodate an input box of such size
alongside the floated image, the input box is pushed below the image.

Comment 4

[Uri Bernstein]

I took another look at the CSS2.1 spec:
http://www.w3.org/TR/CSS21/visuren.html#floats .
The first example in section 9.5 clearly demonstrates that the current behaviour
is correct (so this bug should be marked INVALID).

Alternatively, this can be made into a "Tech Evangelism" bug. The obvious fix
for this on the web page is to specify the width of the input boxes in pixels,
using CSS, instead of by using the "size" attribute.

BTW, If you're not seeing the "bug", try increasing the font size (using Cmd-+).
This will increase the size of the input box and cause it to be pushed below the
image.

Comment 5

[Michael Miller]

I feel you are inaccurate in your assumption. I have explored the markup for
this page (Which is 100% valid strict XHTML by the way), and there is no
evidence that suggests a near 1024x768 window should have that field moved below
the graphic.

Comment 6

[Uri Bernstein]

(In reply to comment #5)
> I feel you are inaccurate in your assumption. I have explored the markup for
> this page (Which is 100% valid strict XHTML by the way), and there is no
> evidence that suggests a near 1024x768 window should have that field moved below
> the graphic.

The window size is irrelevant here. The image and the form are contained within
a div with id="columns". The CSS stylesheet (http://www.gnaa.us/index.css)
contains the following rule (line 60):

#columns
{
    width: 800px;
}

Comment 7

[Michael Miller]

Assuming you are right, there is a still problem with the fact that is displays
as expected in Windows and not on OS X.

Comment 8

[Uri Bernstein]

(In reply to comment #7)
> Assuming you are right, there is a still problem with the fact that is displays
> as expected in Windows and not on OS X.

That would be because the default font used for text fields on OS X is larger
than  the one used on Windows, causing size="80" to translate into a larger
width (in pixels).
I don't have a Windows machine here, but I did compare the default font size for
text boxes on several OS X browsers. What I did is simply specify a font size
for one text box, and visually compare the result to another text box with no
size specified. Here are my findings:

Safari:  Lucida Grande 11px / 8pt
IE5:     Arial(?)      12px / 9pt
Camino:  Lucida Grande 11px / between 8pt and 9pt
Firefox: Lucida Grande 13px / 10pt

So Firefox is using a larger font than other browsers on OS X (and presumably, a
larger font than what it uses on Windows).

I tried to trace where the default font size was determined, but I only saw that
it was defined in forms.css as "-moz-field". I don't know how this is translated
into an actual font.

So this bug might be valid, if its description is changed to something like
"Firefox on OS X uses by default too large a font for text boxes".

Still, a good web design should not rely on the selection of a default font by
the browser.

Comment 9

[Michael Miller]

If what you say is true, then they changed that from 0.9.3, because the page
looks as expected in all version previous to 1.0PR.

Comment 10

[Uri Bernstein]

I submitted bug 262191 about the "font size of input controls" issue. If that is
fixed, this problem should disappear.

Comment 11

[Uri Bernstein]

Marking invalid as per my comments above.