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:

    overflow: auto;
    overflow: hidden;

…Any overflow property other than visible – which is the default.

I’m not really sure why, but this fixes the issue:

4 much appreciated responses...

  1. Lucille says:


  2. Péter Szél says:

    Thank you very much, I had the same issue, you probably saved hours of debugging for me 🙂

  3. Sadia says:

    I had the same issue. I works perfectly! Thanks!

  4. Sadia says:

    I had the same issue. Your solution works! Thanks!

Leave a Reply to Péter Szél Cancel reply

Your email address will not be published.