626383 - Setting font size under a certain threshold produces a strange layout behavior with CSS float propery.

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Andrea Del Bene]

User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv:1.9.2.13) Gecko/20101206 Ubuntu/10.04 (lucid) Firefox/3.6.13
Build Identifier: Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv:1.9.2.13) Gecko/20101206 Ubuntu/10.04 (lucid) Firefox/3.6.13

A small font size seems to break normal rendering of line break markup followed by a floating markup.
For example let's say we have a floating-left label followed by an option tag with 12px font size:

<label class="float:left;width 12opx">Some label</label><select style="font-size:12px">...</select><br/>

This line ends with <br> and we expect the new following line to start with the same left indentation of the previous one.
But the actual result is that the new line has a left indentation equals to label's width (120 px in this case)

 

Reproducible: Always

Steps to Reproduce:
Just load the attached html page.
Actual Results:  
You see string "new line" indented

Expected Results:  
You should see string "new line " without indentation

Comment 1

[Andrea Del Bene]

Attachment: Load this html page in firefox 3.6.13 to reproduce bug. Set font size from 12px to 13px to see the expexted behaviour

Comment 2

[Andrea Del Bene]

The bug seems not to affect incoming version 4.0 beta 9

Comment 3

[Daniel.S]

This is no bug.

Floats are able to shorten line widths. If you give the label a background-color you'll see that the float is so high, that the new line is still in its way. So the line "new line" is shortened (you'd say indented).

By increasing the select elements font-size, it will become so big that the new line will eventually no longer be in the floats way thus shifting to the left (the 'correct' position).

You can see the same behaviour in every other browser as well, because this is the defined behaviour.