Problem in chrome, HTML Form in div over a div.

Question

I've got 3 div's on my page, one is the form which is last in the code and positioned ontop of the first 2 divs. In Google Chrome when I try click the form fields it wont let me unless I click the bottom bit of input boxes or the very top of radio buttons.

I've confirmed the problem is with having divs behind it by removing the other 2 divs, and it worked fine after.

Does anyone know how to fix this?

Code:

<div id="info_top"></div>  
<div id="info_bottom"></div>  
<div id="tabs">  
    <ul>  
        <li><a href="ahah_1.html" title="tabcontent"><span>tab1</span></a></li>
        <li><a href="ahah_2.html" title="tabcontent"><span>tab2</span></a></li>
        <li><a href="ahah_3.html" title="tabcontent"><span>tab3</span></a></li>
    </ul>  
    <div id="tabcontent"> ... </div>  
</div>

info_top, info_bottom and tabs have their positions set as absolute with the tabs div sitting over the other 2. The form gets loaded into the tabcontent div.

Link: http://hintswen.com/tempstack/trunk/ use second link on that page to open it, the form is on the last tab (top row).

Answer 1

I'm not sure if this would work, but try setting a large value of 'z-index' for the 'ul' tag

Edit: Set the value of z-index to -1 for both divs, it works (in firefox, at least)