Question

I have four input fields in a div. The first two are for first and last name, and the second are for email and password. I have two inputs for first and last name on one line, one input for email on another, and one input for password on another. Using HTML size, I am trying to make it so the combined size of the first and last name inputs match the input size of email and password.

Here is a jsFiddle showing what I’m trying to do:

http://jsfiddle.net/QxC2h/

As you can see, despite having size="18" on the first and last names, they are still wider than the size="38" of the email/password.

Now I wanted to style the input fields a bit anyway, so I added that. Here you will see the same set up as above, but styled:

http://jsfiddle.net/hpEZS/

In Safari and Chrome, the input fields become aligned as desired with styling . However, in Firefox the combined size of first and last name is wider than the size of email/password.

Is there any way to fix this in Firefox?

Answer 1

If you are willing to add some Firefox only styling to your stylesheet

    @-moz-document url-prefix() {

        input { width: 0px; }

    }

And then of course adjust accordingly for whichever ones are causing you the problem