351435 - [pinstripe] the text of a tab is now displayed too high vertically relative to the avicon and the close button

Status: NEW

(Firefox :: Tabbed Browser, defect)

Description

[(not reading, please use [e-mail] instead)]

[pinstripe] the text of a tab is now displayed too high vertically relative to the avicon and the close button

in bug #347487, mark writes:

"the text of a tab is now displayed too high vertically relative to the favicon and the close button.  The tab height appears to have grown, this could be the problem"

Part of my last change to mozilla/toolkit/themes/pinstripe/global/browser.css
vertically centered the text within the tab (and with respect to the
background gradient of the tab).

when I zoom in on the tab strip, I'm noticing that:

1)  non selected tabs have 2px border on top
2)  selected tab has 3px border on top (*)
3)  left, right and all tabs buttons have 3 px border on top (*)
4)  (but all favicons, close boxes, and button icons are lined up)

the text in the selected tab looks "too high", due to these off by 1px errors (indicated by *)

Comment 1

[(not reading, please use [e-mail] instead)]

I'd like to fix these "off by 1px" issues before firefox 2, so asking for blocking.

Comment 2

[Mike Beltzner [:beltzner, not reading bugmail]]

I don't see what you're referring to in my latest nightly build, Seth.

Comment 3

[(not reading, please use [e-mail] instead)]

Attachment: screen shot

Comment 4

[(not reading, please use [e-mail] instead)]

Attachment: zoomed in

Comment 5

[(not reading, please use [e-mail] instead)]

I chatted with beltzner over IRC, and I'll be working on a fix to:

1)  lower the text (in selected and non selected) tabs by 1px
2)  lower the top of the non-selected tabs by 1px, to match the selected tabs, left / right / all tabs buttons.

#2 will mean 3px of "grey" on mac above everything on mac, where we have 2px on pc.  Beltzner writes:  "I also think a little more tab strip space on the Mac would probably look better; OS X is pretty heavy with borders and spacing"

I'll work up this fix, and attach a screen shot.

Comment 6

[Mike Beltzner [:beltzner, not reading bugmail]]

We wouldn't block ship for this, but would take a safe polish patch.

Comment 7

[(not reading, please use [e-mail] instead)]

I was having a hard time with this, but when I removed the background image from the tabstrip, it is clear that the tops of the tabs are indeed lining up.

it's also clear that there are transparency issues with the hover, nonselected tab images.

I'll attach a screen shot.

I think all that needs to be done here is what Mark suggests:  lower the text of the tab by 1px.

Comment 8

[(not reading, please use [e-mail] instead)]

Attachment: screen shot, zoomed in, without a background image

I claim that the top of the tabs are lined up (except for the text, which I want to drop by 1px).

The tab strip background image causes an optical illusion (at least for me).

note, the non-selected hover tab images have some transparency issues.

Comment 9

[(not reading, please use [e-mail] instead)]

sorry for the bug spam, re-assigning bugs back to default owner if I'm not working actively on them.