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




8 years ago
7 years ago


(Reporter: bitstorm19, Unassigned)


1.9.2 Branch

Firefox Tracking Flags

(Not tracked)



(1 attachment)



8 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv: Gecko/20101206 Ubuntu/10.04 (lucid) Firefox/3.6.13
Build Identifier: Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv: 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

8 years ago
Created attachment 504426 [details]
Load this html page in firefox 3.6.13 to reproduce bug. Set font size from 12px to 13px to see the expexted behaviour


8 years ago
Version: unspecified → 3.6 Branch

Comment 2

8 years ago
The bug seems not to affect incoming version 4.0 beta 9
Component: General → Layout: Floats
Product: Firefox → Core
QA Contact: general → layout.floats
Version: 3.6 Branch → 1.9.2 Branch

Comment 3

7 years ago
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.
Last Resolved: 7 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.