Question

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;

}

Answer 1

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>