two tables with position:absolute issue

Question

Hi,

I'm having two table elements, both with position: absolute style. First table is responsible for some kind of layout stuff, has width: 100%, while second displays a few input controls, and has width: 400px and is centered.

In IE I run into issue: first table seems to cover second table, for instance I can't set focus into my input elements using mouse. Also when I play with Developer Tools, and try to inspect input element, by clicking on it, the element which actually gets inspected is first table element. I have to use TAB to set focus into input element.

Everything works fine in FF & Chrome & Opera.

Any idea what's going on? I've tried to play with z-index: not helped.

Thanks

EDIT: those are tables:

table 1

<table width="250" id="loginbox" style="z-index: 1001; position: absolute; left: 706.5px; top: 150px;">
<tbody>
    <tr>
        <td>Username:</td>
        <td width="150" style="text-align: right;">
            <input type="text" style="width: 150px;" class="brandBorder" id="username" name="username">
        </td>
    </tr>
    <tr>
       <td>Password:</td>
        <td>
            <input type="password" style="width: 150px;" class="brandBorder" id="password" name="password">
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2">
            <input type="submit" class="button" id="LoginButton" value="Login" name="LoginButton">
        </td>
    </tr>
    <tr>
        <td align="center" colspan="2">
            <br>
            <br>
            <span class="error" id="msg"></span>
        </td>
    </tr>
</tbody>

table 2

<table style="right: 0px; left: 0px; margin: 0px; width: 100%; position: absolute; top: 0px;">
    <tbody><tr>
        <td style="background-image: url('login-tbg.gif'); width: 499px; background-repeat: repeat-x; height: 60px;">
            <img border="0" src="login-lt.gif">
        </td>
        <td align="left" style="background-image: url('login-tbg.gif'); width: 30%; background-repeat: repeat-x; height: 60px;">
        </td>
        <td style="background-image: url('login-tbg.gif'); width: 15px; background-repeat: repeat-x; height: 60px;">
            <img border="0" src="login-tm.gif">
        </td>
        <td align="right" style="background-image: url('login-tr.gif'); width: 30%; background-repeat: repeat-x; height: 60px;">
            <br>
            <img border="0" src="login-right.gif">&nbsp;
        </td>
    </tr>
    <tr style="height: 99%;">
        <td valign="top" align="center" style="height: 99%;" colspan="3">
        </td>
        <td class="loginsidebar">
        </td>
    </tr>
</tbody>

And those tables are sitting next to each other in form element. Please, don't tell me that it should be made on DIV etc... :) I know it :)