Browser Compatibility Issues with Entry Widths

I'm having issues with different browsers rendering form entries at different sizes. It also appears to be happening based on the operating system. Any suggestions on how to fix this?

Here is a link to the form page: http://www.wovvwebsites.com/r360-trial

The form looks fine on a PC. But here is a screenshot from Chrome for iOS. You can see the first name/last name fields don't line up


Here is the form in Firefox. You can see the submit button is extra long:


I'd love some help. I don't even know where to begin with the CSS.

Hi hdwillis,

I suspect that the answer is to to what you have done with the Submit button and set specific widths for each of the elements.

I think that the differences you are seeing are because the browsers treat the padding and margins slightly differently but I haven't dug far enough to be certain.

Bob

PS Using Bootstrap classes might also help but I'm not certain that they would manage the two name boxes neatly.

Bob,

Do you have an alternative suggestion on how to set a width for the submit button that will make it the same size as the entries above it? I searched through the forum and tried different solutions before finding one that sorta-worked.

-Hunter

Hi Hunter,

The simplest ones are to set all the widths the same, or to set the width of the form and make the inputs 100%

Bob