Question

I am having a strange issue with focus on FF 17. I have a div which has no tabindex attr and one with tabindex=”0″. I am Shift+TAB ing from second div (with tabindex) to first div(no tabindex). Strangely, the first div is recieving the focus and the entire div is highlighted with dotted lines. Can anybody tell me why FF is putting focus on first div even if there is no tabindex attribute?

If interested, the first div has following CSS

clear: both;
min-width: 1010px;
left: 7px;
right: 7px;
top: 141px;
bottom: 10px;
overflow: auto;
position: absolute;
-webkit-box-shadow: 0 5px 4px #DDD;
box-shadow: 0 5px 4px #DDD;
background: none repeat scroll 0 0 #FDFDFD;
border: 1px solid #AAA;
border-top: 0;

Thanks.

Answer 1

It’s getting focus because it has overflow: auto. The reason that happens is that things with overflow:auto can have scrollbars, depending on their content, and when they have scrollbars you want them in the tab order so that you can tab to them and scroll with arrow keys, for users who are not using a mouse. But at that point you either have to put overflow:auto things in the tab order all the time or have your tab order change when you change the font size or resize your browser window or whatnot. The latter is pretty confusing to users, so Gecko does the former.