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:
Interesting^^
Thank you very much, I had the same issue, you probably saved hours of debugging for me 🙂
I had the same issue. I works perfectly! Thanks!
I had the same issue. Your solution works! Thanks!