215839 - Text on icons should be aligned onto a straight line

Status: VERIFIED WORKSFORME

(Firefox :: Toolbars and Customization, defect, P3)

Description

[Jan Sammler]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5a) Gecko/20030728 Mozilla Firebird/0.6.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5a) Gecko/20030728 Mozilla Firebird/0.6.1

If the user selects "Text and Icons" from the "Show"-section in the customize
dialogue, he'll get a text underneath the icons in the toolbars. This text isn't
aligned onto a straight line. Instead, some icons are misaligned - at least with
the standard theme.

Reproducible: Always

Steps to Reproduce:
1. Open the customize dialogue.
2. Select Show: Text and Icons and select "Use Small Icons".
3. Click 'Done'.

Actual Results:  
The Toolbar produces the icons with some text misaligned.

Expected Results:  
The Toolbar should produce the icons with rightly aligned text.

Comment 1

[Pham]

only back and forward is different from the rest on mine

Comment 2

[Bernie Zimmermann]

After looking through some of the code I've arrived at the assumption that the
problem has something to do with the fact that the Back and Forward buttons are
bound in browser.css like this:

-moz-binding: url("chrome://browser/skin/browser.xml#toolbar-menu-button");

The other buttons, which are not bound in this way, do not exhibit the same
behavior as Back and Forward, and so their text seems misaligned compared to
those two.

I am going to attach a screenshot that points out quite specifically the
alignment problem.  Note that in the image, the misalignment is not only limited
to the text...it appears that the icons themselves are misaligned as well.

Comment 3

[Bernie Zimmermann]

Attachment: Icon and text misalignment.

Comment 4

[Blake Ross]

This is just a fundamental appearance issue that we should fix for 1.0.

Comment 5

[Jesse Ruderman]

*** Bug 217293 has been marked as a duplicate of this bug. ***

Comment 6

[Jesse Ruderman]

From the dup: this happens in both "Text" mode and "Icons and text" mode.

Comment 7

[Simon Paquet [:sipaq]]

*** Bug 233096 has been marked as a duplicate of this bug. ***

Comment 8

[Henrik Skupin [:whimboo][⌚️UTC+2]]

Confirming with Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7a)
Gecko/20040128 Firebird/0.8.0+

Comment 9

[miahz]

Attachment: patch fixing text alignment problem

i tracked the mis-alignment down to some missing padding on menu-buttons in
classic/skin/classic/browser/browser.css.
this patch ONLY applies to menu-buttons (back, forward, inspect) in small icons
mode + icons and text mode as originally described in this bug.  it does NOT
cover the text mode issue described in bug 217293.  i remember seeing other
bugs where linux has rendering issues with menu-buttons.  the issue reported in
this bug looks fine for me with this patch on windows 2000.  i do not see the
text mode problem.  bug 217293 should be un-duped.

Comment 10

[miahz]

> it does NOT
> cover the text mode issue described in bug 217293.  i remember seeing other
> bugs where linux has rendering issues with menu-buttons.

a bug about toolbar menu-buttons in linux that i mentioned in my previous comment 9:
http://bugzilla.mozilla.org/show_bug.cgi?id=219650
some screenshots and discussion:
http://weblogs.mozillazine.org/djst/archives/004744.html

Comment 11

[Ben Goodger (use ben at mozilla dot org for email)]

Yeah that's kind of nasty isn't it. 

Comment 12

[Ben Goodger (use ben at mozilla dot org for email)]

Fixed in Winstripe

Comment 13

[Peter van der Woude [:Peter6]]

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040609
Firefox/0.8.0+ (FF0.9rc)

Not with the small icons+text

Comment 14

[Henrik Skupin [:whimboo][⌚️UTC+2]]

verified with Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7)
Gecko/20040611 Firefox/0.8.0+

Comment 15

[Peter van der Woude [:Peter6]]

Attachment: continous misalignment

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040609
Firefox/0.8.0+
and
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7) Gecko/20040608 Firefox/0.8.0+
(GTK2+XFT)

REOPEN this bug please , it's not fixed (see attachement)
Reproduce:
1. Open Customise toolbar
2. Select Icons and Text and [V] Use Small icons
3. Drag the Back, Reload, Forward and Stop button to the right of help and
Press Done

Comment 16

[Wolf [:wolf]]

Reopened by request

Comment 17

[Peter van der Woude [:Peter6]]

Sorry for the spam

WORKSFORME 

using Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040611
Firefox/0.8.0+

Comment 18

[Simon Paquet [:sipaq]]

Marking FIXED again

Comment 19

[Simon Paquet [:sipaq]]

Verify again

Comment 20

[Steven Garrity [:sgarrity]]

Attachment: Screenshot of 0.9 toolbar alignment problems on Gnome

I'm still seeing the misalignment with 0.9 on Gnome (default install of Fedora
Core 2). I've attached a screenshot.

This might be related to the issue in comment #10 ?

Comment 21

[Worcester12345]

S(In reply to comment #20)
> Created an attachment (id=150930)
> Screenshot of 0.9 toolbar alignment problems on Gnome
> 
> I'm still seeing the misalignment with 0.9 on Gnome (default install of Fedora
> Core 2). I've attached a screenshot.
> 
> This might be related to the issue in comment #10 ?

Well, should this be reopened, then? 

Should it maybe block "Aviary"?

Comment 22

[Jeremy M. Dolan]

>> Fixed in Winstripe
> Not with the small icons+text

Actually, with BOTH small and large icons, text is still misaligned for me. A
restart of the browser does not fix the odd display. Firefox 0.9.1, Linux.
Reopening due to many reports of this.

Simon, in the future you may want to avoid marking FIXED and VERIFYing a bug
based on one user report, which wasn't even on the same platform. Just adds to
the confusion.

Comment 23

[miahz]

whoa, umm... this bug as originally reported (small icons + text mode in the
default qute theme on windows) is fixed.  i cannot get the labels to misalign
with any combination of text and icon modes in 0.9/0.9.1 on windows 2000.  the
theme is fine.

i think the problem the rest of you are seeing is the menubutton rendering
weirdness in linux (comment 10).  and i still say bug 217293 should be
unduped/reopened, because that specifically deals with the back/forward
(menubutton) labels in linux.

Comment 24

[Grey Nicholson (they/them)]

I have clear misalignment here (2004071815-0.9 WinXP) using either large or
small icons with text. It persists when I change the system font, so it's not
related to Vera Sans being extra wide.

Comment 25

[miahz]

Greg,
Could you attach a screenshot?  Also, were you using XP's Luna style, or Win
Classic?  I just tested 0.9.2 and today's nightly on XP Luna and 2000 Classic,
and saw no misalignment.  Do you have any browser or system mods that might have
an effect (userChrome.css hacks, system DPI/font size settings, etc.)?

Comment 26

[Grey Nicholson (they/them)]

Attachment: Miscellaneous misalignment

The only semi-relevant userChrome is:

/* Make menus XP style */
menupopup, popup {
   border: 1px solid ThreeDShadow !important;
   -moz-border-left-colors: ThreeDShadow !important;
   -moz-border-top-colors: ThreeDShadow !important;
   -moz-border-right-colors: ThreeDShadow !important;
   -moz-border-bottom-colors: ThreeDShadow !important;
   padding: 1px !important;
   background-color: Menu !important;
}
menubar > menu {
   border: 1px solid transparent !important;
   padding: 2px 5px 2px 7px !important;
   margin: 0 !important;
}
menubar > menu[_moz-menuactive="true"] {
   background-color : Highlight !important;
   color: HighlightText !important;
}

/* Remove Forward/Back button drop markers */
.toolbarbutton-menubutton-dropmarker {display: none}

I don't think that will affect it. If the lack of drop-markers was causing the
misalignment, the Back and Forward icons would be too far right, not too far
left. I'm not using any crazy system font sizes.

...However it occurs to me that you're all on about vertical misalignment... I
have horizontal misalignment. Ah, well - here's the screenshot anyway.

Comment 27

[miahz]

Yes, this bug is about vertical alignment of the text labels.

What you've brought up is certainly another bug, but is actually misalignment of
the icons - as you can see in your screenshot, the labels themselves are centered.

Caused by:
global/toolbarbutton.css/.toolbarbutton-icon {
  margin-right: 2px;
}
-which was actually increased to 5px in recent builds - making the effect worse.
 I guess i'll have to whip up a bug and patch for that too.

Comment 28

[Jesse Ruderman]

*** Bug 229464 has been marked as a duplicate of this bug. ***

Comment 29

[Jesse Ruderman]

*** Bug 255406 has been marked as a duplicate of this bug. ***

Comment 30

[Asa Dotzler [:asa]]

This continues to be a fairly ugly problem on Gnome. Tested with the latest
nightly builds. It seems to only impact menubuttons and also shows up in
Thunderbird. Perhaps this can be fixed within the theme, but it seems like an
underlying problem given that it impacts different themes and different apps. 

Comment 31

[Stephen Horlander [:shorlander]]

I tried to track down the cause of this bug in the CSS last week and couldn't
narrow it down. I think Asa is right and it is a deeper problem, because as far
as I can tell it shouldn't be doing this.

Comment 32

[Ben Goodger (use ben at mozilla dot org for email)]

Not a "blocker", but don't let me stop you if you're bored. 

Comment 33

[Steven Garrity [:sgarrity]]

WFM - This seems to be working now, and I think it has been for a while (since
1.0?).

Can anyone else confirm this? If so, I'll mark as FIXED.

Comment 34

[Bernie Zimmermann]

Confirmed.  WFM in:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414
Firefox/1.0.3

Comment 35

[Henrik Skupin [:whimboo][⌚️UTC+2]]

This is fine for a current trunk build. But my Mozilla/5.0 (X11; U; Linux i686;
en-US; rv:1.7.7) Gecko/20050421 Firefox/1.0.3 (Debian package 1.0.3-2) still
shows the miss-alignment for reload, stop, home and some others.

Version => 1.0 Branch

Comment 36

[Henrik Skupin [:whimboo][⌚️UTC+2]]

I can't see this behavior since a long time on different machines.

=> WFM