Text input field width in IE

[bp_travis]

Hello. How can I regulate the way IE renders the size of text input fields? Take this page for example: https://www.barkleigh.com/pnw08_booth_app.asp

In FF and Safari, the text boxes appear to be close to the width of each other, but in IE, that is not the case. They are not close in IE. How can I regulate the width in IE and still make it look good in FF and Safari? Thanks.

[ray326]

I'm not seeing much difference in IE7. All the same size and looks about the same as Fx. Are you using IE6 perchance?

[bp_travis]

Hello. Well, after looking at it a bit, I have come to the conclusion that it is just the difference between how PC's render the <input> tag with the size="a number" part vs the way a Mac does. FF and Safari on the Mac for the most part line up all the ends of the lines of input boxes including the City State and Zip one. However, on a PC, FF and IE both have the State and Zip boxes out more and not lined up with the rest. Thoughts on this theory? Thanks

[Fang]

This does not work x-browser, some round up, others round down, to zero!
input[type="text"]{
border:.5px solid #000; /* smallest border is 1px */
}

Try giving all inputs a width:20em; then the other 3 inputs a suitable value.
Make sure the font values for the input has been set.
Set the inputs as correct as possible in Fx, Opera and Safari. IE can be adjusted using conditional comments (http://msdn2.microsoft.com/en-us/library/ms537512.aspx)

[yuzhu.shen]

I notice that <input size="30" type="text"/> creates a textbox that can exactly put in 30 characters in Safari. But IE doesn't do so (about 25 characters). Does anybody knows how IE determines the width?

[ray326]

Using a style setting width in ems is probably a more general strategy.

[yuzhu.shen]

Thanks for reply. :) But I want to imitate the way IE determines the width with size attribute, and not only want to create a neat page.