CODEWITHSUNDEEP
htmlcssfirefoxbrowser
ian
ian

Reputation: 12335

text field significantly bigger in certain browser

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?

Upvotes: 1

Views: 755

Answers (5)

sushil bharwani
sushil bharwani

Reputation: 30187

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.

Upvotes: 0

Web Logic
Web Logic

Reputation:

Specify the dimension via style or class:

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

Upvotes: 1

NoAlias
NoAlias

Reputation: 9193

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.

Upvotes: 0

corroded
corroded

Reputation: 21564

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 }
}

Upvotes: 0

Dan Beam
Dan Beam

Reputation: 3927

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" />

Upvotes: 1

Related Questions