It's just a minor CSS issue. See the following gif:

  • 10
    A bit off-topic, but: could I ask what software you used to make that gif? It really looks quite nice.
    – senshin
    Apr 24 '14 at 4:58
  • 8
    I am on a Linux machine running Ubuntu 14.04. and I used byzanz-record. I created my own byzanz-record GUI wrapper, that I shared on my GitHub account. But here you will find a shell script that is very easy to use after installing the dependencies. Apr 24 '14 at 9:20
  • 1
    @IonicăBizău: Wow. That is AWESOME. I've been looking for something like that for ages. Thank you! Apr 24 '14 at 17:48
  • 1
    @AmalMurali You're welcome. :-) Apr 24 '14 at 18:16
  • 1
    Start bounties to repro. May 7 '14 at 11:35
  • 1
    @hims056 Opened on this question. May 7 '14 at 12:02
  • Still an issue…
    – Ry-
    Jul 23 '14 at 0:07
  • LOL @ the petting the button.
    Sep 30 '14 at 0:56

This has been resolved as part of design overhaul MSE went through not long ago. Now both normal and hovered states have blue square background of the same size, as it should be.


Looks like the problem is that there class .bounty-vote-off, which is used to style the un-awarded bounty button when you're not hovering the cursor over it, has an extra padding: 2px 4px 3px style that doesn't match the padding: 0.2em 0.5em style for the .bounty-award class.

Simply removing the padding style from .bounty-vote-off should fix this bug.

Ps. I'm pretty sure this also affects several other SE sites besides MSE, including (at least) the recently graduated Academia.SE and graphicdesign.SE.

Actually, the real cause of this bug seems to be that the bounty icon styling on this site (and on Academia / Graphic Design / etc.) is a Frankenstein hybrid of two entirely different styles:

SOFU style (SO):

Awarded bounty icon on Stack Overflow Unawarded bounty icon on Stack Overflow

Beta style (crypto.SE):

Awarded bounty icon on beta Stack Exchange site Unawarded bounty icon on beta Stack Exchange site

Frankenstein style (meta.SE):

Awarded bounty icon on Meta Stack Exchange Unawarded bounty icon on Meta Stack Exchange

Frankly, I suspect that whoever designed these stylesheets simply started from the beta styles and tweaked them to look more like SO, but forgot to modify or test the unawarded bounty appearance.

Ps. Looks like the CSS fix included in the Stack Overflow Unofficial Patch user script for this related design issue also fixes this bug as a side effect.

You must log in to answer this question.

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