5

Once you see it you'll see it everywhere.

enter image description here

  • 3
    Looks fine on my computer.. i.stack.imgur.com/AFnHQ.png .. what's your browser/OS? – Josh Crozier Dec 9 '13 at 2:08
  • 1
    Looks a little different on mine. Chromium 30 on Ubuntu 12.04. Maybe your enhancement algorithms aren't good enough? :D – asheeshr Dec 9 '13 at 2:14
  • I'm using Firefox (ESR 17) on Windows (2003). – Boann Dec 9 '13 at 2:18
  • norepro here as well, Chrome 31.0.1650.63 Win7 – Doorknob Dec 9 '13 at 2:23
  • 1
  • 2
    Firefox 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 Dec 9 '13 at 2:29
  • @AaronBertrand Apologies but it never occurred to me I might be the only person seeing it. – Boann Dec 9 '13 at 2:31
  • 1
    I 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 Dec 9 '13 at 2:32
  • 3
    Reproduced on latest Firefox (25.0.1) on Windows 8.1 – Joseph Quinsey Dec 9 '13 at 2:34
  • 1
    IE 10 on Win RT has the missing pixel on the other corner. Weird. – michaelb958 Dec 9 '13 at 3:06
5

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.

enter image description here

enter image description here

So, if you make the bottom border transparent... It will account for your missing pixel.

Example in jsFiddle

2

I see something a little similar on both sides of the tab, in Chrome 31.0.1650.57 on Mac OS X 10.9:

enter image description here

(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).

2

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.

You must log in to answer this question.

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