614796 - Menu items shifted down on localized headers when text is too long

Status: VERIFIED FIXED

(support.mozilla.org :: General, defect, P1)

Description

[Underpass]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.2.13) Gecko/20101122 Firefox/3.6.13
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.2.13) Gecko/20101122 Firefox/3.6.13

After localizing the strings of the homepage header, the menu items look shifted down and are not on the dark blue ribbon like in the en-US page (see attached images).

Tried with:

Firefox 3.6.13-candidate build1 on Linux:
Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.2.13) Gecko/20101122 Firefox/3.6.13

Firefox 3.6.12 on Windows 7:
Mozilla/5.0 (Windows; U; Windows NT 6.1; it; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12

Minefield on Linux:
Mozilla/5.0 (X11; Linux i686; rv:2.0b8pre) Gecko/20101125 Firefox/4.0b8pre

Minefield on Windows 7:
Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101124 Firefox/4.0b8pre

Chromium on Linux:
Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3

Reproducible: Always

Comment 1

[Underpass]

Attachment: Header on Italian homepage

Comment 2

[Underpass]

Attachment: Header on English homepage

Comment 3

[Scoobidiver (away)]

For me, I can only reproduce this issue in FF 3.6.12, IE 8, Chrome 9 on Windows 7.
It is OK in FF 4.0b7 and FF 4.0b8pre with a new profile on Windows 7.

I am not sure it is related to SUMO.

Comment 4

[Scoobidiver (away)]

> It is OK in FF 4.0b7 and FF 4.0b8pre with a new profile on Windows 7.
Oops! It is also wrong in FF 4.0b7 and FF 4.0b8pre.

Menu names are too long. Try to use some abbreviations as in:
http://www.mozilla-europe.org/it/

Comment 5

[Underpass]

Sorry, I wolud not consider it a solution. I think user experience is a most important factor in cases like these.

Comment 6

[Scoobidiver (away)]

It is also applicable to French home page, even if menu names (61 characters) are shorter than the Italian ones (77 characters)

Comment 7

[James Socol [:jsocol, :james]]

Attachment: no padding, float right

Removing the padding on div#nav-main works for French and Italian, but shifts everything left on shorter locales like English.

I checked nova.stage.mozilla.com and there don't seem to be any localized versions of this header so unless John has some guidance I think we're on our own here.

I think shifting everything left looks weird, but shifting everything right (dropping the padding and putting float: right;) looks OK. (Screenshot attached.) I haven't been able to find a way to center the items without fixing a width.

If we're looking at restyling the header in a couple weeks anyway, maybe we can live with the right- (or left-)justified version for now? Maybe someone has a CSS trick up their sleeve I don't know?

Comment 8

[John Slater]

(In reply to comment #7)
> I checked nova.stage.mozilla.com and there don't seem to be any localized
> versions of this header so unless John has some guidance I think we're on our
> own here.
Pascal is probably a better person to talk to here (he's cc'ed). I know he's done some thinking about how to localize this design, but am not totally sure where things stand.

Am also copying Steven from Silverorange, who build the en-US header for mozilla.com. He may also have insights.

Comment 9

[Pascal Chevrel:pascalc]

We don't use submenus on localized pages for moco (which are currently redirected on the nova branch, I have to remove that). On mozilla-europe we still have the menu floating on the right, you can see that on our staging staging with your ldap account https://stage.mozilla-europe.org/es/, you can inspire yourself with our css which has a few rules adapted for our longer strings.

Comment 10

[James Socol [:jsocol, :james]]

div#nav-main on stage.mozilla-europe.org still has left-padding: 140px but since it's floated right it doesn't matter (it will if the localizations change to something like here: https://master.support.mozilla.com/it/home/).

Comment 11

[Ricky Rosario [:rrosario, :r1cky]]

master:
https://github.com/jsocol/kitsune/commit/1528988c530d29957269e458b8f78ef6858d317c

2.3.x:
https://github.com/jsocol/kitsune/commit/b09b72aeeca8a6c2d6f1af693b84713e6a83a5c9

Comment 12

[Rebecca Billings [:rbillings]]

Verified display on /it/home on support-stage

Comment 13

[David Tenser [:djst]]

Reopening. This still looks broken on Linux on the following page. https://support.mozilla.com/it/kb/Individuare%20la%20versione%20di%20Firefox%20utilizzata

Comment 14

[David Tenser [:djst]]

Attachment: Screenshot

Also notice the little text in the sidebar that seems to never break.

Comment 15

[James Socol [:jsocol, :james]]

David: that only happens on that specific page in Italian? Not sure why it doesn't happen everywhere.

We need to find a way to force Linux to not do horribly wrong things with text, though that demonstrates how close Italian is cutting it with fitting text into that spot.

Comment 16

[James Socol [:jsocol, :james]]

(In reply to comment #15)
> David: that only happens on that specific page in Italian? Not sure why it
> doesn't happen everywhere.

Tested in Fedora and it does happen everywhere.

> We need to find a way to force Linux to not do horribly wrong things with text,
> though that demonstrates how close Italian is cutting it with fitting text into
> that spot.

I think specifically we can never let Linux fall through to the fallback "sans-serif" font. I don't know what it's using but it's so wide it's almost monospace.

Comment 17

[James Socol [:jsocol, :james]]

Spun off bug 615887. For historical record let's leave this guy in 2.3.

Comment 18

[David Tenser [:djst]]

Note to WebQA for the future: always make sure to verify on Linux, too, even though it's just about 5% of the user base. :) If it actually was verified there, please ignore this message. Thanks!