8

When I move my mouse over the little inbox icon, it gets highlighted pretty well:

　top bar 1

Sure, it's half a pixel off-center, but it's pretty good.

But when I move my mouse over my reputation notification:

　top bar 2

The grey is the wrong size! It looks weird. Not only is it not centered, it's too thin.

This happens in Firefox 39.0 and Chrome 41.0.2272.43. It doesn't affect the mobile site.

Improve this question
11
  • 5
    Have you tried checking your achievements more often? :)
    – Adam Lear StaffMod
    Commented Jul 28, 2015 at 2:00
  • @CopperKettle so after changing the reps +7400 and still no issue? Could you please add the screenshot of the same, if possible.
    – HackerKarma
    Commented Jul 28, 2015 at 3:19
  • @snailboat could you please tell what is the browser version
    – HackerKarma
    Commented Jul 28, 2015 at 3:21
  • 1
    @HackerKarma - sorry, I didn't notice that aspect of the issue.
    – CopperKettle
    Commented Jul 28, 2015 at 3:25
  • @CopperKettle no problem, give it a shot by editing reps. value in dev tools... I have added the screenshots in my answer for reference
    – HackerKarma
    Commented Jul 28, 2015 at 3:29
  • 2
    status-not-worth-fixing-since-this-is-not-something-that-should-happen-under-normal-circumstances.
    – Shadow Wizard
    Commented Jul 28, 2015 at 5:59
  • 1
    Fun fact: exact same bug, reported by a different user, got tons of downvotes.
    – Shadow Wizard
    Commented Jul 28, 2015 at 6:01
  • @ShadowWizard: It's tempting to think it's just because it's, y'know, nicael, but I've seen a fair number of his bug reports get upvotes, so I don't think that's it. Not sure though.
    – Nathan Tuggy
    Commented Jul 28, 2015 at 6:05
  • @Nathan well, no doubt that with nicael, many users' finger is way more light on the downvote trigger.
    – Shadow Wizard
    Commented Jul 28, 2015 at 6:23
  • @ShadowWizard it's funny how nicael's question gets -2 but this gets +6! +1 BTW
    – ᔕᖺᘎᕊ
    Commented Jul 28, 2015 at 10:30
  • @ᔕᖺᘎᕊ yeah, no +1 from me but also no -1
    – Shadow Wizard
    Commented Jul 28, 2015 at 11:05

1 Answer 1

Reset to default
5

Upon doing an inspect element on the recent achievements, it seems like the fixed width is causing the issue.

.topbar .icon-achievements {
    /* width: 36px; */
    background-position: -220px -54px;
    position: relative;
}

Here is the screenshot of Fixed "width: 36px;" (as currently set):

enter image description here

I commented out the CSS width property (width: 36px) from the class ".topbar .icon-achievements" and it fixes the issue.

The other options here is to set the "width: inherit;" which inherits width that defined by parent. I tried this and it worked too. Upon changing "width" to "inherit" value, now hovering over the link it shows "43.0781px" as the width and not "36px".

Now here is how it looks upon setting "width: inherit;" (or just commenting out):

enter image description here

And, we could add a padding for left and right space to it. 

.topbar .icon-achievements {
    /* width: 36px; */
    width: inherit;
    background-position: -220px -54px;
    padding: 0px 3px 0px 3px;
    position: relative;
}

Here is how it looks now: (notice the padding on left and right side of +7400)

enter image description here

And finally, to fix the off-center issue, change the "margin-top:" property value of the ".topbar .icon-achievements .unread-count" class.

.topbar .icon-achievements .unread-count {
    .
    .
    margin-top: 10px; /* changed from 9px; */
    .
    .
}

There might be another way to achieve this but that's what I can think of at the moment. The values I used for padding and margin-top properties are for example purpose only. The actual value can be set as per the UI design requirement.

Improve this answer
1
  • I am using Chrome Version 44.0.2403.107 (64-bit)
    – HackerKarma
    Commented Jul 28, 2015 at 3:21