CSS works improperly

[Peter Belew]

Binary package hint: firefox-3.0

The web page http://www.bayfed.com/ has an improperly positioned image near the bottom of the screen ("Equal Housing Lender" "NCUA", and so on), and also the links nearby are in the wrong place.

The MS-Windows version of Firefox 3.0 works properly, since it uses an underlying library used also by Internet Explorer.

A friend claims that he has the same page displaying properly using Firefox under Ubuntu 8.04.1 - the same software as on my Dell PowerEdge 400SC, but I'm not sure about that.

The bank is unlikely to fix the problem by checking the users browser, which could solve the problem. I assume this problem is due to the long-standing discrepancy between Microsoft and W3C regarding CSS specs.

I also reported the same problem with Debian's latest IceWeasel build recently.

Microsoft is well aware of this as a problem, but doesn't have a solution.

ProblemType: Bug
Architecture: i386
Date: Tue Aug 12 12:28:57 2008
DistroRelease: Ubuntu 8.04
Package: firefox-3.0 3.0.1+build1+nobinonly-0ubuntu0.8.04.3
PackageArchitecture: i386
ProcEnviron:
 PATH=/home/username/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games
 LANG=en_US.UTF-8
 SHELL=/bin/bash
SourcePackage: firefox-3.0
Uname: Linux 2.6.24-19-generic i686

[Thomas Kluyver (takluyver)]

I initially thought this was 'works for me', but I've found out how to reproduce it:
-From view, zoom, ensure that "Zoom text only" is checked
-Zoom in to page (Ctrl++ or Ctrl+MouseWheelUp)
-Scroll down

I suspect a lot of pages go a bit funny if you enlarge the text. While we can probably argue backwards and forwards about whether it's a bug in Firefox, a mistake in the CSS, or just a casualty of war, I'd suggest that in the meantime, you either view the page at it's native size (Ctrl+0 (that's a numeric zero)), or use Firefox's default zoom mode to scale in on the whole page (View, Zoom, ensure "Zoom text only" is *un*checked). In both of those cases, it Works For Me.

[Peter Belew (peterbe)]

I tried the above instructions regarding zoom settings on 3 different computers, with different displays, running different display resolutions.

I was unable to zoom to a state where the bug does not appear, trying all possible zoom settings, using the menu, Ctrl+0, Ctrl++, Ctrl+-, etc.

With any zoom setting, the graphics shows in an incorrect position as shown in the screen capture .png image attached that I attached earlier.

Version info:
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=8.04
DISTRIB_CODENAME=hardy
DISTRIB_DESCRIPTION="Ubuntu 8.04.1"
Linux dude 2.6.24-19-generic #1 SMP Fri Jul 11 23:41:49 UTC 2008 i686 GNU/Linux

From the About Mozilla Firefox box:
Firefox version 3.0.1
Mozilla rv 1.9.0.1
Gecko 2008072820

[Peter Belew (peterbe)]

This is the same page seen with MS-Windows Firefox, on Windows XP Professional, for reference:

Firefox version 3.0.1:

Mozilla/5.0 (Windows;U;Windows NT 5.1;en-US;
rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

I tried zooming in and out using this MS-Windows version - the links and the graphics image appeared in the right place, at the very bottom of the page, with all the zoom settings that I tried.

[Thomas Kluyver (takluyver)]

Nope, I see more or less what you see in Windows. The only method I've found to replicate that problem is the one I described above, and then I can resolve it either by resetting the zoom (Ctrl+0), or by unselecting "Zoom text only."

I notice that, in your Ubuntu screenshot, the page is rendered in a serif font, whereas on my computer (and on Windows, for you), it's rendered in a sans-serif font. Can you go to Firefox's preferences (in Ubuntu), content, fonts > advanced, and see what settings you have there. I've tried making my default font bigger and disabling "Allow pages to choose their own fonts", but it didn't seem to affect that page.

[Thomas Kluyver (takluyver)]

One extra thought: You mention CSS--you're not using a user stylesheet, are you? Go to "View->Page Style" and see which option is checked (the default is "Basic page style")

[Peter Belew (peterbe)]

Trying this again ...

I made sure the Style setting is as below.

I am now letting the page set font settings from both Windows and Linux
versions of the Firefox browser. Both chose a sans-serif font. For all font
sizes, Windows places the bottom links and the graphics in question
properly (with one slight exception), and Linux always places these elements
several inches about the bottom of the highlighted columns of text.

The exception, in Windows, is that at one small font size, the links and
graphics are placed slightly too high, so there seems to be a very
small overlap with the text columns.

The Linux (Ubuntu) version is -

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008072820
Firefox/3.0.1

The Windows version is -

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1)
Gecko/2008070208 Firefox/3.0.1

(Version 3.0.2 seems to be downloading automatically at the moment -
but I'm running 3.0.1).

Peter

On Tue, Sep 23, 2008 at 7:23 AM, Thomas K <email address hidden> wrote:
> One extra thought: You mention CSS--you're not using a user stylesheet,
> are you? Go to "View->Page Style" and see which option is checked (the
> default is "Basic page style")
>
> --
> CSS works improperly
> https://bugs.launchpad.net/bugs/257408
> You received this bug notification because you are a direct subscriber
> of the bug.
>

[Thomas Kluyver (takluyver)]

OK, I've found another way to replicate it:

In the font preferences dialog I mentioned before, there is a dropdown for "Minimum font size". What is this currently set to? I have just had a play with it, and that website works properly with it set to 10 or below. I leave it at "none".

[Peter Belew (peterbe)]

Excellent! I was able to duplicate this. I tried 'none', 10pt, and 11pt settings
(before the minimum was at 12 or 14pt.) From 'none' up to 10pt. the
layout was correct.

However, on my 1024x768 15-inch TFT screen, the fonts were too tiny to
read, and I had to magnify the font size. The positioning was still correct
after magnification (ie after applying control-+ several times).

So the bug is now described differently: the CSS positioning or size
calculations are based incorrectly on the minimum font size selection,
rather than the actual current font size, when a minimum font size
of 11 points or more is selected.

I also tried both sans-serif and serif fonts (eg FreeSerif and FreeSans),
while forcing the page to use 'my' fonts, and positioning was still
correct.

So I think we now have a correct statement of the problem which
will lead to its solution. The problem really does need to be
solved, since the minimum-size selection is broken.

Peter

On Wed, Sep 24, 2008 at 3:24 AM, Thomas K <email address hidden> wrote:
> OK, I've found another way to replicate it:
>
> In the font preferences dialog I mentioned before, there is a dropdown
> for "Minimum font size". What is this currently set to? I have just had
> a play with it, and that website works properly with it set to 10 or
> below. I leave it at "none".
>
> --
> CSS works improperly
> https://bugs.launchpad.net/bugs/257408
> You received this bug notification because you are a direct subscriber
> of the bug.
>

[Thomas Kluyver (takluyver)]

I'd guess that that's a problem with the website, rather than with Firefox. It will only have been designed to be viewed at it's proper size.

When you're zooming into the page, it's zooming into the whole page, so it stays in proportion--if you set zoom text only to on, it will go funny again.

The issue with the small fonts does sound like a problem, though. Is that only in Firefox, or in other programs? What default font size is set in Firefox (mine is 16).

In an ironic twist, after the fiddling around I did on my computer, the text on the BFCU website is now in the wrong place for me. And I've checked the settings that caused the problem for you...

[Peter Belew (peterbe)]

If that's true with the BFCU website, it's also true with many sites.

By the way, the behavior is the same with the Windows version - I
just tried setting the minimum point size to 11 and larger sizes,
and see the same problem.

MS IE considers this kind of setting to be an accessibility issue -
and indeed it is here.

In my case, "Zoom text only" is unchecked. I don't see why
setting the minimum text size should affect the proportions of
text as well as graphics AND text positioning should be
differently from zooming. This is definitely an accessibility
issue.

On Wed, Sep 24, 2008 at 11:29 AM, Thomas K <email address hidden> wrote:
> I'd guess that that's a problem with the website, rather than with
> Firefox. It will only have been designed to be viewed at it's proper
> size.
>
> When you're zooming into the page, it's zooming into the whole page, so
> it stays in proportion--if you set zoom text only to on, it will go
> funny again.
>
> The issue with the small fonts does sound like a problem, though. Is
> that only in Firefox, or in other programs? What default font size is
> set in Firefox (mine is 16).
>
> In an ironic twist, after the fiddling around I did on my computer, the
> text on the BFCU website is now in the wrong place for me. And I've
> checked the settings that caused the problem for you...
>
> --
> CSS works improperly
> https://bugs.launchpad.net/bugs/257408
> You received this bug notification because you are a direct subscriber
> of the bug.
>

[Peter Belew (peterbe)]

Starting over, so to speak:

This is an accessibility problem. The issue is that default fonts on many web pages are too small for many people with minor vision problems, or people who are simply over the age of 40, to read. I suppose one could require such people to buy 30-inch displays, but that would be absurd!

Instead, my solution is usually to specify a minimum font size. However, as one can see from all the above comments in this report, that solution has a flaw in the case where CSS is used to position parts of the page - apparently the parameters used are derived from the UNzoomed, unchanged font size - something like that.

For Firefox, what does work, apparently is to UNcheck "Allow pages to choose their own fonts..." and force all pages to use the browser's user-selected fonts, instead of the page-defined fonts. This is fairly acceptable, in most cases. It would be a problem where some parts of a page need to use a Unicode range not covered by most standard fonts, such as the Georgian alphabet, and the user needs to use a standard font elsewhere.

One possible solution would be to have a default zoom setting, set by the user (which itself would default to 1.0), which affects graphics and text equally.

For this particular page, being able to just have a default zoom setting would work well. Typically, without zooming, the page only partially fills the screen horizontally, but the text is hard to read due to its small size. Zooming till it's readable also just fills the screen. But that's just for me - other people of course have worse problems reading text.

[Peter Belew (peterbe)]

This is of course an upstream issue for the Mozilla project developers.

[Thomas Kluyver (takluyver)]

I think Mozilla developers would probably argue that it's poor website design to set your font size that small. Nonetheless, the idea of a minimum zoom level is an interesting one, at least in my opinion.

However, I don't think this bug is the place to raise it, now. I'm going to set this bug as invalid. If you want to pursue the idea of a minimum zoom level further you could:
-File a new bug for a wishlist item on firefox, although I wouldn't recommend this--the bug tracking system is designed for, well, bugs, not features you'd like, and in any case, Ubuntu doesn't design firefox.
-File a wishlist bug for Firefox upstream (after checking no-one else has already).
-Forums (Ubuntu or Mozilla)
-Ubuntu brainstorm.