I’m interested in…

Firefox and it’s CSS :focus outline bug

I’ve recently been working with an online university where there’s understandably a large emphasis on accessibility. Part of this is being able to navigate through a site using only the keyboard. This is when I discovered a little bug in Firefox which is illustrated below.

When I focus on certain elements it expands the outline all the way off the screen to the left. My first thought was hmm, maybe the elements are all wider than I think they are. So I did the usually firebug check, but nope. Here’s the element with a 1px border around it:

It’s only on :focus that this happens, and here’s the solution. Give the element an overflow property: