Fixing the styling of active navigation elements in Firefox
Fixing the styling of active navigation elements in Firefox

In Firefox outlines are move by descendant elements if those reach out
of the element: https://bugzilla.mozilla.org/show_bug.cgi?id=687311
This could be fixed using box-shadows instead - however there is a bug
in IE11 which creates lines between the background and the box-shadow of
an element:
https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow

While trying to workaround that bug in IE11 I figured out that it is
possible to create a pseudo element to display the white border.
This also gives a litte improvement regarding the behavior of the
elements: The white border added for active/hover elements is also
clickable, so the hovered element looses the hover state if the mouse
leaves the white space, not some pixels before.

Ekrow/Wall-of-Hype,Ekrow/Wall-of-Hype