Field Width in Chrome vs Firefox

[ChecMark]

Going nuts trying to figure out why Chrome and Firefox render field widths differently. I have researched and tried various solutions for hours now and I’m getting close, but not perfect. The form field widths obviously affect the position of the rows on my form so they need to be similar.

This is about the best CSS I have used –

<input type="text" style="width:400px; id="streetaddress" name="streetaddress" class="input_focus" maxlength="60" />

input[type=text], textarea {

-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
font-size: 12px;
padding: 3px 0px 3px 3px;
margin: 5px 6px 3px 0px;
border: 1px solid #DDDDDD;
-moz-box-sizing: border-box;
}

input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 6px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}

Applying this to the “Street Address” field gets them just a few pixels shorter in Chrome than in Firefox. Not sure how to get this any closer.

Here’s the working link –
http://prismcareernetworks.com/prism_wordpress/wp-content/forms/registration_candidate/registration_form_candidate.html

[paulob]

Hi,

If you are going to use the border-box model then give it to all browsers and not just moz.

-moz-box-sizing: border-box;

Use this instead:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;

Always finish the rule with the non pre-fixed version.

[Author]

Posts