Netscape CSS - Position:absolute and overflow:auto causing input box cursor to disappear.

Author

Position:absolute and overflow:auto causing input box cursor to disappear.

murrah

2005-06-04, 10:18 pm

Hi.

I have a page that is used to edit database records and each record has many fields so I have grouped the fields onto divs and use "tabs" to select the required "page".

See http://www.bvsp.com.au/tasks/testdivs.htm for a cut down version of this that works on IE 5.5, NN 7.2 and Firefox 1.0.1

Now, in the real situation one of the tab pages needs to have scrolling capability because there will be situations where the content wont fit in the available space.

If I add overflow:auto (or scroll) to one of the "pages" (div) the blinking cursor on the input boxes of the other pages disappears ! This is a problem only on NN and Firefox. IE works fine.

See http://www.bvsp.com.au/tasks/testdivsscroll.htm for the example.

The code is identical to the first example except that I have added overflow:auto to the last div.

If I make the position relative, the problem goes away but then the pages are not on top of one another which defeats the whole purpose.

Any suggestions ?

Thanks,
Murrah

shipscript

2005-06-14, 11:30 pm

I have had a similar problem with the cursor on a very similar setup. It wasn't until reading your post that I could pinpoint the problem, as you stated, attached to "position:absolute" in conjunction with "overflow:auto".

I have found a workaround for your trial code that works consistently in FireFox and IE6, and hopefully it will work for my complex page setup as well.

I changed all of your "position:absolute" to "position:relative" and changed the "visibility:hidden" and "visibility:visible" to "display:none" and "display:block". The "overflow:auto" remains in the code - on all three tabs.

I have seen many other different issues associated with "overflow:auto", so I assume this is a more complex issue than just what we are seeing.

Thank you for posting your problem, as it has helped me immensely. Here is your code posted on a public practice board.
http://PracticeWriter.com/?7DF

murrah

2005-06-15, 4:12 am

Yep, that fixes it alright !

Thank you so much. I hadnt really paid attention to the "display" object so I didnt see how it could be used instead of the visible/hidden technique.

I hope your code works ok now too.

By the way, what is that Practise Writer site? Is that yours ?

Cheers,
Murrah

genade

2007-10-03, 8:35 am

I have a quick and dirty solution, just setting the height an width of the divs to 0px before I hide them...