6

In beta sites text on top bar (e.g. review, help etc.) are pushed down a little bit. To feel the difference just open any beta & this meta site in two different tabs and switch between both tabs. I have tested on many beta sites but can't find in themed(launched) sites.

Is this bug or by design?

Looking at it's CSS, the line-height value the class topbar-menu-links is 1.3 while on themed sites the line-height value is 1.0.

enter image description here

Browsers: Chrome (Version 31.0.1650.63 m), Firefox (Version 26.0); OS: Windows XP

1
  • Yaa, little down in beta .
    – Bala
    Dec 14, 2013 at 7:12

1 Answer 1

3

The problem seems to be that the top bar is inheriting the global line height set for the body element.

On most graduated sites, this is set to 1, which makes the top bar look as (presumably) intended, but on beta sites (and, apparently, a few graduated sites like Ask Patents) the line height is 1.3, which causes the text in the top bar to take up a little more vertical space. It's particularly noticeable (well, if you're looking closely, at least) because the menu triangle icons are positioned relative to the top of the line, and so don't move, whereas the text itself lies on the baseline, which does.

Long story short, here's a quick CSS fix:

.topbar { line-height: 1 }

This makes the top bar look the same (at least in this respect) on all sites.

Edit: This fix is now included in the Stack Overflow Unofficial Patch.

3
  • 2
    Well, I think I have already mentioned the same solution in my question. :-)
    – Himanshu
    Jan 10, 2014 at 3:41
  • 1
    This got incorporated into the official code at some point. Probably around when Workplace.SE got its design. Either way, fixed!
    – Adam Lear StaffMod
    Apr 4, 2014 at 22:09
  • @AnnaLear: Thanks for the heads-up! I've removed it from SOUP v1.12, along with a bunch of other fixes that are no longer needed. Apr 15, 2014 at 0:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .