What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

Whenever we click on the Inbox or the Achievements in the top bar, an extra blue line appears near by them. This is reproducible on Stack Overflow and Anime & Manga(as I use only those) but not on Meta Stack Overflow. Here is a snapshot of that.

Extra Blue Line

I'm using Firefox 25.0.1 on Win7 Pro.

Edit: Just to be double sure, I restarted the FF and still I'm able to see it. Here is another snapshot, with the 2 distinct sites.

Blue Line 2

share|improve this question
1  
No repo on Chrome on Windows 8.1 (ouch, I can't believe I decided to upgrade) –  psubsee2003 Dec 5 '13 at 11:38
    
Not sure why I'm able to see it then. And that too only on SO and Anime and not MSO. –  R.J Dec 5 '13 at 11:39
2  
Seen it on desktop FF, can't guess how I did it. Isn't it caused by playing with <kbd>Tab</kbd>? –  Mołot Dec 5 '13 at 11:40
    
Are you on specific page? –  rene Dec 5 '13 at 11:43
    
@rene - Just the questions page on both the sites. –  R.J Dec 5 '13 at 11:45
    
I can see it on Firefox 25 on MSO on Ubuntu, but the color is dark red and quite difficult to see over the dark background. It seems every site has different outline colors. –  Lie Ryan Dec 5 '13 at 11:45
    
Do you have text zoom on or something? –  Nick Craver Dec 5 '13 at 11:46
    
@NickCraver - Nope. Nothing of that either. Its on the default zoom of 100%. –  R.J Dec 5 '13 at 11:47
3  
@Mołot That is it, If you tab once in the page I can repro it. In other words, if the focus is on an element somewhere on the page. –  rene Dec 5 '13 at 11:47
2  
And that only holds for FF. In IE11 I do not see that, in Chrome a brownish line is visible exact around the image, as expected. –  rene Dec 5 '13 at 11:50
1  
Oh yeah. @rene is Correct, I can repro it –  Tijesunimi Dec 5 '13 at 11:54
    
Noticed those after clicking to open the inbox for example and clicking again on the inbox to close it, leaving now a red border around what seems to be the button. Can get that for every dropdown in the top bar. The help border is white while the ones on the left side of the bar are red. FF under Ubuntu. –  Jonathan Drapeau Dec 5 '13 at 13:54
1  
Firefox is very special here, Chrome looks awesome and handles the highlight appropriately...not sure why Firefox does crazy here. If the crazy was the right size even, it'd be better. We'll poke this and see what works. –  Nick Craver Dec 5 '13 at 15:51
2  
@Mołot that's what I'd like too, the trouble is Chrome for example is doing it perfectly, try tabbing and it looks beautiful. While I can change the outline properties (somewhat) of Firefox, the fact that the widths are way off isn't something I see how to fix, so even if I give it a clean line it's very weird and off :-/ Still, we'll poke it some more –  Nick Craver Dec 6 '13 at 11:12
1  
@NickCraver any updates, two months later? –  Shadow Wizard Feb 4 at 23:44

2 Answers 2

this seems to clear that dotted line on focus, try it out:

.topbar *:focus{
  outline: 0 none;
}

a post with same issue:

How to remove Firefox's dotted outline on BUTTONS as well as links?

share|improve this answer

"Firefox is very special here, Chrome looks awesome and handles the highlight appropriately...not sure why Firefox does crazy here. If the crazy was the right size even, it'd be better. We'll poke this and see what works." – Nick Craver ♦ Dec 5 '13 at 15:51

Apparently, the problem is that Firefox is counting the

<span class="hidden-text">Reputation and Badges</span>

element inside the button when determining the size of the focus outline. That kind of makes sense, since, despite the class name, the text isn't really hidden, but just positioned outside the vsisible page ares:

.topbar .hidden-text {
    position: absolute;
    top: -200px;
}

The easiest fix is to simply hide the text for real with display: none. If you don't want to do that for some reason, limiting the width of the "hidden" text with:

.topbar .hidden-text {
    width: 10px;
    overflow: hidden;
}

seems to also work.


Ps. By default, Firefox chooses the focus outline color based on the element's text color. For a more consistent view, I'd suggest also adding the style:

.topbar .topbar-icon, .topbar .profile-me { color: #E0E0E0 }

This should have no other effects, since all actual text in those links is either hidden or restyled by inner elements, but it ensures that all the top bar elements have a consistent light gray focus outline in Firefox.

Ps. While waiting for an official fix, I've added the CSS rules suggested above into SOUP v1.10.

share|improve this answer
1  
Working hard to get hired, aren't you? :-) –  Shadow Wizard Mar 9 at 21:35
    
@ShadowWizard: I should be working hard on my Ph.D., this is just procrastination. :) –  Ilmari Karonen Mar 10 at 17:24

You must log in to answer this question.

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