text field significantly bigger in certain browser

Question

I have the below text field in my page:

<input class="message" id="message" name="message" type="text" size="65" />

For some reason in the latest FireFox for OS X it is about 200pixels wider than it is in the latest Chrome (mac/pc) FireFox(pc) and IE(pc)

Any suggestions on how I can fix this or why this is happening?

Answer 1

Post your CSS.

However, regardless of this, I think your fix is adding this rule

    width: 300px; /* change size accordingly */

to

#message {

or

.message {

and removing the size

<input class="message" id="message" name="message" type="text" />

Answer 2

Browsers usually render form elements differently(and it also varies by OS). If you want your form elements to look the same then style it with CSS. In this case, just add a width in your css like so:

input {
  width: 200px }
}

Answer 3

If you're using ASP you can use the Request.ServerVariables("http_user_agent") method to get the browser and OS information and set the variable (that ends up being the size attribute of the message text object) to a smaller size.

Answer 4

Specify the dimension via style or class:

<input class="message" id="message" name="message" type="text" style="width:200px;" />

Answer 5

Browsers have a different way of rendering different elements on your DOM; In a project startup where you feel your site should look exactly same on all the browsers one common approach web designers use is writing up a reset.css file. This file sets up properties of most of the used DOM elements to a standard value.