264471 - Float error when text size is decreased

Status: VERIFIED INVALID

(Core :: Layout, defect)

Description

[Paul Hirsch]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040707 Firefox/0.9.2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040707 Firefox/0.9.2

Hello.  I noticed the following error on two different computers.  The one from
which I'm writing is using FireFoz 0.9.2.  However, the other computer, which is
also running Windows XP on a PC has the latest, stable build.  I installed it
this morning.

The error occurs when you decrease text to be smaller than the browser default.
 If you view the source, you'll see I've floated a menu to the left side of the
screen, and positioned content to the right using a margin.  When text size is
decreased, the menu jumps inside of the content <div>.  At default or larger
size, the text remains in its expected place.  Opera 7.x does not display this
behavior.  IE6 does not either, not that this tells us anything.

The site validates to HTML 4.01 Strict and the CSS passes every lint I've run it
through.  I believe I've used sound, efficient coding practices within the
boundaries of coding standards, and I can't see any reason for this odd behavior.

Thank you for your time.  I anxiously await an answer to this mystery!

Reproducible: Always
Steps to Reproduce:
1. Load http://www.iwdn.net
2. Decrease font size

Actual Results:  
The error is produced as described above in the "Details" section without fail
in the latest FireFox build and the most recent beta.

Expected Results:  
The text size should have decreased without any change to the layout.

I used the default installation in both cases - no extensions, no themes, no mods.

Comment 1

[Phil Ringnalda (:philor)]

Same result in Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a4)
Gecko/20040927

-> Browser

Comment 2

[Uri Bernstein]

Attachment: testcase

Reducing the font size causes the (red-bordered) sidenav to "jump" to the right
- starting immediately to the right of the (yellow) <a> element inside the
(blue-bordered) topnav.

This is actually the correct behaviour (and the bug is therefore invalid).
Explanation coming up soon.

Comment 3

[Uri Bernstein]

Here's whats going on:
The topnav height is specified (as 30px) using "line-height", which is affected
by changes to the font size.
The height of the <a> element contained inside the topnav is specified (as 30px)
using "height", which is unaffected by changes to the font size.
So when the text size is decreased the topnav shrinks but not the <a>. Since the
<a> is floated inside the topnav, it is allowed to "overflow" downwards (the
topnav is not grown to encapsulate it). 
The result is that the sidenav vertical starting point, which is immediately
below the bottom of the topnav, is higher than the bottom of the floated <a>.
The sidenav is floated itself, and the float rules determine that in this case
it should be pushed to the right of the previous floated item (the <a>), and not
beneath it.

The easy fix to the page is to add "height: 30px" to the #topnav style rule
(while keeping the "line-height:30px").

Marking INVALID, and CCing bzbarsky just in case.

Comment 4

[Uri Bernstein]

(In reply to comment #3)
> The easy fix to the page is to add "height: 30px" to the #topnav style rule
> (while keeping the "line-height:30px").

Actually, a better fix would be to add "clear:left" to the sidenav rules.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Yep.  Uri is absolutely correct.  Verified invalid.

Comment 6

[Paul Hirsch]

Wow, you guys are fantastic.  I think clear:left in this implementation triggers 
a bug in IE causing all previous text to disappear even when quirks mode is not 
triggered (stupid, stupid browser), but I'll give it a try.  If not, I'll try 
the height fix you suggested.

Sorry if this wasted your time.  For the life of me (and several others who 
looked), I could not see the fault in the coding.  My only other thought was 
some sort of bug.  I'll scrutinize my work more carefully in the future!

- Paul Hirsch