Once you see it you'll see it everywhere.
-
3Looks fine on my computer.. i.stack.imgur.com/AFnHQ.png .. what's your browser/OS?– Josh CrozierDec 9, 2013 at 2:08
-
1Looks a little different on mine. Chromium 30 on Ubuntu 12.04. Maybe your enhancement algorithms aren't good enough? :D– asheeshrDec 9, 2013 at 2:14
-
I'm using Firefox (ESR 17) on Windows (2003).– BoannDec 9, 2013 at 2:18
-
norepro here as well, Chrome 31.0.1650.63 Win7– DoorknobDec 9, 2013 at 2:23
-
1meta.stackexchange.com/questions/56161/…– randomDec 9, 2013 at 2:27
-
2Firefox 17? Windows 10-years-old? How far back do you expect a web site in 2013 to cater to, especially for something so trivial?– Aaron Bertrand StaffDec 9, 2013 at 2:29
-
@AaronBertrand Apologies but it never occurred to me I might be the only person seeing it.– BoannDec 9, 2013 at 2:31
-
1I don't doubt that you're not the only person seeing it. I just don't think it's reasonable to expect that they're going to drop everything to fix minor visual inconsistencies in browsers so old that there's no chance any modern workarounds will improve the situation anyway.– Aaron Bertrand StaffDec 9, 2013 at 2:32
-
3Reproduced on latest Firefox (25.0.1) on Windows 8.1– Joseph QuinseyDec 9, 2013 at 2:34
-
1IE 10 on Win RT has the missing pixel on the other corner. Weird.– michaelb958--GoFundMonicaDec 9, 2013 at 3:06
3 Answers
That's just the way borders render, in Firefox, on the one px scale.
In the image below the top box has a border of 20px and the bottom box has a border of 1px.
So, if you make the bottom border transparent... It will account for your missing pixel.
I see something a little similar on both sides of the tab, in Chrome 31.0.1650.57 on Mac OS X 10.9:
(In my case, it looks like a reasonable attempt to round a 1-px corner.)
However, this is most likely going to come down to how each browser renders certain CSS elements. It isn't a bug SO is going to be able to fix without getting all of the browsers to work exactly the same (good luck with that - especially given the triviality of the issue, and the fact that the browser you're using isn't even officially supported at all).
Greasemonkey fix:
GM_addStyle('#tabs a:hover { border-bottom-width:0; height:25px; }');
GM_addStyle('#tabs a.youarehere { border-bottom-width:0; height:31px; }');
That removes the tab's bottom border (instead of coloring it white), then increases the height of the tab by 1 pixel to cover the #ccc baseline using the tab background instead of the tab border.