Text field font style in IE and Firefox

[snitin78]

So, I have a simple User Name text field for the login page of my application. Here is the mark up for the text field:

<td>
<input type="text" name="username" value="" id="loginUser_username" style="font-family:arial,sans-serif;"/>
</td>

As you can see the text field has the font-family specified, but even with that the style of the entered text ends up looking different in IE8 and Firefox-3. (Frankly, to me it is not a big deal/difference, but our QA is bent on fixing this )

Any ideas as to what else needs to be done so that the fonts looks exactly the same in both the browsers?

 

[snitin78]

And I just realized that this is more prominent (or may be even happening only for) numbers. Alphabetical names seem to be fine.

Any help is appreciated. Thanks.

 

[traingamer]

You're looking at an exercise in futility. See: Styling form controls with CSS, revisited
among many other references discussing the ways that different browsers display form inputs.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[snitin78]

I understand! Let's see if I can get my QA to buy this ;-)

Thanks for the useful link and a quick reply, Greg.

 

[BillyRayPreachersSon]

Not wanting to detract from that article, as it contains some good general information... but setting the fonts for text inputs is one thing I've never had a problem with (this is also echoed in one of the comments of that article).

snitin78, do you have a CSS rule with !important after it that might be overriding the element style? Have you tried to use Firebug or the IE developer toolbar to trace the rule?

Perhaps it's nothing more than some browsers are anti-aliasing the font, whereas others are not?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/