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:

a:focus{
    overflow: auto;
}
a:focus{
    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:

    Interesting^^

  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!

Feel free to add your comment..

Your email address will not be published.