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.)

Tags: , , ,

This entry was posted on Monday, January 11th, 2010 at 6:25 pm and is filed under Thoughts. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Comments

Leave a Reply (Replying to a specific person? Click the black arrow below their comment.)