CSS, DIVs, Forms and tab focus

[Christoph]

I have a form that looks something like this:

<form>
<fieldset>
<div><label>blah</blah><input type="blah"></div>
<div><label>blah</blah><input type="blah"></div>
<div><label>blah</blah><input type="blah"></div>
<div><label>blah</blah><input type="blah"></div>
</fieldset>
</form>

When tabbing between form elements, it focus doesn't actually go to the
next/previous element. What's happening is that focus is going to the div.
When I hit the [TAB] key from a form element, the DIV is highlighted with a
border. I have to hit [TAB] again to actually get to the next form element.
I've tried to set tab-index: none in various places but that didn't seem to
work. I tried:

BODY { tab-index: none; }

then I tried

FIELDSET { tab-index: none; }

then I tried

FORM DIV { tab-index: none; }

I also tried giving it a value of 0. I also tried fooling around with the
user-focus property, but that didn't work either.

How can I make it so that the DIVs are not given focus in the form? That
only the actual form elements get focus when tabbed to/from?

thnx,
Christoph

 

[Steve Pugh]

I have a form that looks something like this:

<form>
<fieldset>
<div><label>blah</blah><input type="blah"></div>
<div><label>blah</blah><input type="blah"></div>
<div><label>blah</blah><input type="blah"></div>
<div><label>blah</blah><input type="blah"></div>
</fieldset>
</form>

Does the actual page contain the same errors that this sample does?

Post a URL not snippets of code, how do we know whether what you
describe is due to the errors we can see or something elsewhere in your
HTML or CSS. From the above we can't even see if you're triggering
quirks mode or standards mode.

When tabbing between form elements, it focus doesn't actually go to the
next/previous element.

In which browsers?

What's happening is that focus is going to the div.

Or perhaps, to the label?

When I hit the [TAB] key from a form element, the DIV is highlighted with a
border. I have to hit [TAB] again to actually get to the next form element.
I've tried to set tab-index: none in various places but that didn't seem to
work. I tried:

BODY { tab-index: none; }

The tab-index property in CSS 3 is not yet widely supported by browsers
and should not be relied on. none is not an allowed value for it
anyway.

How can I make it so that the DIVs are not given focus in the form? That
only the actual form elements get focus when tabbed to/from?

Show us the actual code.

With the code corrected (adding required attributes and elements,
fixing broken label elements) I don't get the behaviour you desribe in
IE7, FireFox 1.5 or Opera 9.

Steve

 

[Christoph]

Does the actual page contain the same errors that this sample does?

No. That was just the basic structure.

Post a URL not snippets of code, how do we know whether what you
describe is due to the errors we can see or something elsewhere in your
HTML or CSS. From the above we can't even see if you're triggering
quirks mode or standards mode.

Fair enough. My apologies.

In which browsers?

Firefox 1.5. I don't get the same problem in IE7. I do have different
problems in IE7 but I know why that is.

Or perhaps, to the label?

No, definitely the div. As a test, I put normal borders around both and
when I tab, I see the 'focus' border (for the want of a better description)
matches that of the div border.

The tab-index property in CSS 3 is not yet widely supported by browsers
and should not be relied on. none is not an allowed value for it
anyway.
Ok.

Show us the actual code.
With the code corrected (adding required attributes and elements,
fixing broken label elements) I don't get the behaviour you desribe in
IE7, FireFox 1.5 or Opera 9.

I do think that the problem lay somewhere in my CSS. If I take that out, I
don't experience the problem. But for the life of me, I can't figure out
*where* in my CSS that is the root of the problem.

You can see the page here:

http://www.geocities.com/jcboget/communal_haven/edit.htm

Just click in the 'Name' form element field and hit the [TAB] key.

thnx,
Christoph

 

[BootNic]

Does the actual page contain the same errors that this sample does?

No. That was just the basic structure.

Post a URL not snippets of code, how do we know whether what you
describe is due to the errors we can see or something elsewhere in
your HTML or CSS. From the above we can't even see if you're
triggering quirks mode or standards mode.

Fair enough. My apologies.

In which browsers?

Firefox 1.5. I don't get the same problem in IE7. I do have different
problems in IE7 but I know why that is.

Or perhaps, to the label?

No, definitely the div. As a test, I put normal borders around both
and when I tab, I see the 'focus' border (for the want of a better
description) matches that of the div border.

The tab-index property in CSS 3 is not yet widely supported by
browsers and should not be relied on. none is not an allowed value
for it anyway.
Ok.

Show us the actual code.
With the code corrected (adding required attributes and elements,
fixing broken label elements) I don't get the behaviour you desribe
in IE7, FireFox 1.5 or Opera 9.

I do think that the problem lay somewhere in my CSS. If I take that
out, I don't experience the problem. But for the life of me, I can't
figure out *where* in my CSS that is the root of the problem.

You can see the page here:

http://www.geocities.com/jcboget/communal_haven/edit.htm

Just click in the 'Name' form element field and hit the [TAB] key.

Look to see if you have the div's overflow set to auto, if you do
remove the overflow auto or set it to another value such as hidden or
visible.

If I recall correctly, in firefox and seamonkey setting a div overflow to
auto makes it where you can tab to it.

 

[Christoph]

Just click in the 'Name' form element field and hit the [TAB] key.

Look to see if you have the div's overflow set to auto, if you do
remove the overflow auto or set it to another value such as hidden or
visible.
If I recall correctly, in firefox and seamonkey setting a div overflow to
auto makes it where you can tab to it.

That was exactly my problem. Thank you very much!

thnx,
Christoph