7

There is an alignment issue in the Activity - bounties tab. When one or more bounties are active for the user, the bottom border of the bounties tab is missing in the Firefox browser.

When selecting the bounties tab it is looking fine, but when we are navigate to other tabs, it missing the bottom border.

Screenshot for reference:

Bounties tab

Configurations:

  • OS Version: Windows 10 Pro
  • Firefox version: 54.0 (32-bit)
  • Zoom level: 100%

After inspect the element, looks like bounty-indicator-tab class vertical-align: middle caused the issue.


Update:

This bottom border missing issue is not only for the bounties tab, it is for other tabs too when it loaded with the numbers.

Others tabs too

1 Answer 1

2

The proximate cause here is that the extra padding on the blue marker causes the height of the tab to increase by half a pixel (from 12px to 12.5px), which is just enough to make the tab overlap the bottom border of the tab bar. Simply reducing the top and bottom padding on the blue box by a pixel or two is enough to fix it.

However, it seems the me that the way the tabs are currently styled (using carefully calculated top and bottom padding) is really fragile, and liable to break again if anything else ends up violating the implicit assumption that the text inside the tabs occupies exactly 12px of vertical space. It would be much more robust to get rid of the bottom padding and just specify the desired height of the tabs explicitly. Something like the following user style out to fix this (and related problems):

/* XXX: "body" prepended to increase selector specificity over SE style sheet */
body .tabs a, body #tabs a {
    box-sizing: border-box;
    height: 40px;
    padding-bottom: 0;  /* override current SE style */
}
body .tabs a.youarehere, body #tabs a.youarehere {
    height: 41px;
    padding-bottom: 0;  /* override current SE style, again */
}

You must log in to answer this question.

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