282291 - Displays okay on Windows. Does NOT display okay on Linux.

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Roger]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.5) Gecko/20050115 Firefox/1.0
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.5) Gecko/20050115 Firefox/1.0

Should be a "Join the Campaign" navbox on the left; a news column in the middle;
and a "Take Action" box on the right. Firefox/Windows reproduces correctly;
Konqueror/KDE/Linux reproduces correctly. Firefox/Linux seems to have an issue.

Reproducible: Always

Steps to Reproduce:
1. Surf to http://www.democrats.org/news/
Actual Results:  
Blue text on blue background (left side of page), unreadable.

Expected Results:  
Page displayed correctly. Displayed "Join the Campaign" box on left; "Take
Action" box on right; News column in the middle, with text not overlapping the
blue column on the left.

I took a couple of screenshots, one with Firefox/Linux, the other with
Konqueror/KDE/Linux.

Comment 1

[Roger]

Attachment: Screenshot showing Firefox on the web page (Ksnapshot took the pic)

Shows Firefox displaying www.democrats.org/news, scrolled down to the problem
text.

Comment 2

[Roger]

Attachment: Screenshot showing Konqueror displaying page correctly (KSnapshot pic)

Shows how the page should have been displayed...

Comment 3

[Ben Fowler]

Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b) Gecko/20050211
Firefox/1.0+

I see the same as Konqueror, and do not see the problem you present.

Since your page is valid markup and renders in one standard browser,
it should render correctly in all.

You might want to check with a more recent version of Firefox, or
review carefully any personal configuration of your lizard.

The problem should be simple and easy to fix, good luck.

Comment 4

[Boris Zbarsky [:bzbarsky]]

I can reproduce this at some font sizes, but not others; seems to depend on when
floats fit next to each other.....

Martijn, can you reproduce this by any chance?

Comment 5

[Martijn Wargers (dead)]

Attachment: Testcase

Testcase, derived from that site.
the <div> in the #topnav <div> has float left. When you make the font-size
larger (or you have already a larger font-size), the <div> in the #topnav <div>
gets a larger height than the #topnav <div>, because the #topnav <div> has a
fixed height set of 28px.
The #leftnav, #rightnav and #content <div>'s react to this, because they also
are floaters. These floaters are getting out of the way where the <div> in the
#topnav <div> is, but still they try to get as high and as left as possible.
So basically I think that Mozilla is doing the correct thing here, and I think
this bug is invalid.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Roger, do you have a minimum font size set, by any chance?  To something more
than 11px?

The site sets a font-size of 11px on everything.  Then it sets a height and
line-height of 28px on #topnav.  If you have a minimum font size of, say 16px,
then we will scale the line-height appropriately (to 16/11 * 28px), but the
height doesn't change, so the float overflows #topnav and interferes with the
layout of the rest of the page...

Comment 7

[Roger]

(In reply to comment #6)
> Roger, do you have a minimum font size set, by any chance?  To something more
> than 11px?
> 
> The site sets a font-size of 11px on everything.  Then it sets a height and
> line-height of 28px on #topnav.  If you have a minimum font size of, say 16px,
> then we will scale the line-height appropriately (to 16/11 * 28px), but the
> height doesn't change, so the float overflows #topnav and interferes with the
> layout of the rest of the page...

Ooh. Yes, I do; it's set to 12. Let me reset that and check.

That seems to have been the problem.

Okay, not a bug. Just a funky with HTML and a setting.

Comment 8

[Boris Zbarsky [:bzbarsky]]

Marking invalid... site should really be using font-relative units throughout;
then there would be no issue...