How does tabbing affect position and display

[bryan rasmussen]

Hi,

I have an application the code of which I am unfortunately not allowed to put out on the net, but hopefully you can help me anyway because I think this is just a part of the html/css stack where I am not as knowledgeable as I would like.

The application is in an iframe.

In the application we have a #logo div, positioned absolutely at the top of the page, followed by a div #boxtop with an iframe in it with a margin-top they same as the height of the logo div, followed by a div #content with some form fields.

overflow on the document as a whole is set to hidden, however both #boxtop and #content have overflow auto, in smaller sizes of iframe they overflow.

When I tab through the form elements it seems that the #content div expands in size, pushing the #boxtop div up, so that part of it is hidden under the #logo.

Why does this happen? From various experiments it seems intrinsic to tabbing. The problem is if I set a tabindex on my #boxtop I can get focus on the element but it is not moved down so that the top is visible again. Is there a way to force this?

 

[Jukka K. Korpela]

I have an application the code of which I am unfortunately not
allowed to put out on the net,

You should construct a demo, with all confidential data stripped off of
course, upload it on a server, and post a URL. Without something
tangible, this is just shooting in the dark.

The application is in an iframe.

Is that relevant? Does the problem manifest itself when the code is
tested as a standalone document? Try to isolate the issue to a minimal case.

When I tab through the form elements it seems that the #content div
expands in size,

Well, does it expand? What do the browser’s developer tools say about
its dimensions?

Why does this happen?

Well, the obvious guess is that you have a style sheet that uses the
:focus pseudo-class, or an onfocus event handler that changes something
on the page. Can’t really guess more accurately... or should I say “Oh,
I think it’s on line 8961”?

 

[se]

Hi,

I have an application the code of which I am unfortunately not allowed to
put out on the net, but hopefully you can help me anyway because I think
this is just a part of the html/css stack where I am not as knowledgeable
as I would like.
Bull-shit!.


The application is in an iframe.

In the application we have a #logo div, positioned absolutely at the top
of the page, followed by a div #boxtop with an iframe in it with a
margin-top they same as the height of the logo div, followed by a div
#content with some form fields.

overflow on the document as a whole is set to hidden, however both #boxtop
and #content have overflow auto, in smaller sizes of iframe they overflow.

When I tab through the form elements it seems that the #content div
expands in size, pushing the #boxtop div up, so that part of it is hidden
under the #logo.

Why does this happen? From various experiments it seems intrinsic to
tabbing. The problem is if I set a tabindex on my #boxtop I can get focus
on the element but it is not moved down so that the top is visible again.
Is there a way to force this?

It's not necessary having the iframe in a div.
Try drop it and place its style in the iframe. I do not say
this will correct the problem. But often a lot of nested divs
displays the problem you have.