HTML / CSS: Form does look different on firefox than on chrome

I've got a simple form

<div class="wrapper">
<div id="form">
    <h3>Login</h3>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <fieldset>
        <legend>Login</legend>

        <label for="username">username:</label><input type="text" name="username" value="">
        <br />
        <label for="password">password:</label><input type="password" name="password" value="">
        <br />
        <input type="submit" name="login" value="submit"><br />
        </fieldset> 
    </form>
</div> 

and the css

.wrapper {
    margin-top: 180px;
}

#form {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

With this css I want to center the form. But my major poblem is that the form looks different on Google Chrome and Mozilla Firefox. On Firefox it its larger and not centered.

On Chrome:

On Firefox:

I'm using Firefox 42.0, Google Chrome Version 46.0.2490.86 and Ubuntu 14.04.3 LTS.

Thank you very much.

Answers


May be firefox applying some default width for textbox. Try to add the following in your CSS so that both firefox and chrome will looks same.

 #form input:not([type=submit])
 {
   width:150px;
 }

Need Your Help

how to return reference of a class in c++

c++ class reference

As far as I know, this is a pointer and *this is a reference. So if I have a class Sample and a method of it like:

how to approach converting VBscript to Python code?

python vb.net vbscript esri

I've been asked by my boss to convert a piece of vb script, which is manually run every Friday into python, except he wants it automated. I'm new to programming and would like some help deciding ho...