Fix for Firefox’s :focus outline layout bug

Going into geeky web developer mode here:

In a CSS layout, any block-level element that has an outline applied to its :focus state (by default in Firefox and most browsers for accessibility reasons,) and that is also enclosed in a container element that has overflow: auto applied to it (a widely used float clearing method) will potentially break the layout on focus.

The fix for this is to include :focus { outline-offset: -1px; } (or a similar value) in your stylesheet. This fixes the issue in Firefox 3.5.2 Win. More testing to come soon (Opera.)

This entry was posted in Thoughts and tagged , , , . Bookmark the permalink.

3 Responses to Fix for Firefox’s :focus outline layout bug

  1. Um…I totally get it. Well, actually, I don’t. But I believe you. LOL

  2. Derick says:

    I love it when you talk dirty.

  3. Artem says:

    Thank you for the solution to the focus border issue in Firefox, that was exactly what I needed!