Why is Chrome's error pop up for text input fields appearing in the wrong place?

I'm using the HTML5 'required' tag on some input fields. This works great in firefox but for some reason in Chrome it does the following:

What's causing the error pop up to appear in the wrong place?

P.S

In case it's needed, here's the CSS for input fields:

input[type="text"], input[type="password"], input[type="email"] {

height: 25px;
width: 200px;

border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;

border: none;

padding: 4px 8px 0;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, .1)),to(rgba(0, 0, 0, .01)));
background: -moz-linear-gradient(0% 100% 90deg, rgba(0, 0, 0开发者_开发问答, .01), rgba(0, 0, 0, .1));

box-shadow: 0 1px 0 rgba(255, 255, 255, .87) , inset 0 1px 3px rgba(0, 0, 0, .33), inset 0 0 1px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .87), inset 0 1px 3px rgba(0, 0, 0, .33), inset 0 0 1px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .87), inset 0 1px 3px rgba(0, 0, 0, .33), inset 0 0 1px rgba(0, 0, 0, .25);
-o-box-shadow: 0 1px 0 rgba(255, 255, 255, .87), inset 0 1px 3px rgba(0, 0, 0, .33), inset 0 0 1px rgba(0, 0, 0, .25);

text-align: left;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 15px;
font-weight: normal;
line-height: 1;

text-shadow: 1px 1px 1px white;
color: #3B3B3B;

}

---

I found a workaround for the problem, however, I'm still unsure as to the actual cause. Looking at the html below you'll see everything is wrapped in "#mainContainer" who's width is set to 900px. When I removed the width in the CSS the problem went away. To maintain the 900px width and work around the issue, I added a secondary wrapper as a child of "#mainContainer".

        <div id="mainContainer">
        <div id="innerWrap">
        <?php
        include ('header.html');
        ?>
        <form method="post" action="download.php" type="application/x-www-form-urlencoded">
            <h3 style="margin: 15px 0;">Please login to download NPVCalc</h3>
            <table style="margin: 0 auto;">
                <tr>
                    <td><span>Username: </span></td>
                    <td>
                    <input type="text" name="username" required />
                    </td>
                </tr>
                <tr>
                    <td><span>Password: </span></td>
                    <td>
                    <input type="password" name="password" required />
                    </td>
                </tr>
            </table>
            <br/>
            <input type="submit" name="submit" value="Login" />
            <input type="reset" name="reset" value="Reset" />
            <br>
            <br>
            <a href="forgotpass.php" style="font-size:12px">Forgot password?</a>
        </form>
        </div>
        <div class="clearfix"></div>
    </div>