overflow style causing form display issues

Hello,
 
      Currently I'm working on an application that is essentially
mimicing Windows Explorer.  I have a table with two cells.  
 
    The left cell is smaller and contains a div that shows the tree. I
am using this css style:
    .Tree
    {
        height: 85%;
        width: 200;
        overflow: auto;
    }

    The right side also contains a div, and this displays the list of
objects.  I am using this css style:
    .List
    {
        height: 85%;
        width: 100%;
        overflow: auto;
    }
 
    I also have a div that is "hidden" by setting the width and height
to 0 and the overflow to hidden.  The position of this div is set to
absolute.  This div contains a form.
 
    Clicking on an object on the right side of the "explorer" exposes
the hidden div with the form in it.  Javascript centers the div on the
page and grays out everything.  Basically I'm simulating a pop up
window.  It is important to note that this pop up simulation has been
used all over our application with no problems.
 
    In IE 6 and IE7, everything works with no problem.  In Firefox
2.0.0.3, when the form is displayed, the cursor is never visible when
putting the focus on any of the text input fields.  You can type in the
fields, they are enabled, but the cursor is not being displayed.  After
lots of trial and error I have traced the problem to the List class I
have described above.  When the overflow style is set and the width is
greater than 240 px, the cursor will not appear.  If the overflow is not
set, it works.  Or if the overflow is set but the width is less than
240px, the cursor is fine.
 
    From a UI standpoint, it's important to have these divs scrollable.
So I'm at a loss for what is the reason for this?  Has anyone ever seen
this problem before?  Any thoughts on how to fix it?
 
Thank you very much,
Morry

Received on Thursday, 26 April 2007 19:45:30 UTC