HTML form fields not usable in chrome, works in IE

Question

The admin login form for the website I'm building isn't working in chrome, but it works fine in IE. What could be causing this? I found one other question on here about a similar issue, but its answers didn't work for me.

Preview: http://a.emutek.net/site/admin/

HTML:

<div id="body">
        <div class="divhead" id="adminhead">Login to website management:</div>
        <div id="adminlogin">
            <form name="adminlogon" action="login.do.php" method="post">
                <table border="0">
                    <tr>
                        <td>
                            Username: 
                        </td>
                        <td>
                            <input type="text" name="user">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Password: 
                        </td>
                        <td>
                            <input type="password" name="pwd">
                        </td>
                    </tr>
                    </table>
                <input type="submit" value="Submit">
            </form>
        </div>
</div>

CSS:

    #body {
        z-index: -1;
        position: relative;
        top: -6px;
        padding: 7px;
        background-color: white;
        border-radius: 6px;
}

.divhead{
    background-color: #111;
    color: #CCC;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    padding: 3px;
    margin-bottom: 5px;
    border-radius: 6px;
}
#head{
    border-radius: 6px;
    margin-bottom: -10px;
    padding: 5px;
    background-image:url('../img/bg_header.png');   
}
#adminlogin{
    margin-left: 40%;
    z-index: 10;


}
#adminhead{
    margin-top: 20px;
    margin-bottom: 10px;
    width: 700px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
}

Answer 1

remove the position: relative; in #body it will work

you can see the cursor its in chrome also tested in firefox and safari

Answer 2

Instead of positioning #body to get it below #nav , you should position #nav to be above #body .

#body{ position: relative; z-index: -1; ... }

#nav{
    position: relative;
    z-index: 1;
}

Answer 3

You need to change your z index css in the body from -1 to something positive

body {
    z-index: 1111;
}