View Full Version : Inconsistent Appearance of Text in Text Input Boxes

06-04-2003, 05:53 AM
I have two calculators which both have identical input for font selection, size and color. And the results you see on them are identical... except in the text input boxes. In fact, the font selection, size and color come from a common .js file. I do not use CSS or anything fancy.

The pages are very complex, all coded in JS which creates them is HTML. But I can put the following simple code at the very beginning of either calculator and see the varying results in the text boxes:

<input type=text size=5 maxlength=5 border=1>

There is only one difference I can think of between the two calculators. The first assembles the HTML and then does a document.write to create itself. In this one, the text in the boxes appears heavier:


The second calculator assembles the HTML and then does a parent.image.document.write to create the page in another frame, image:


Both calculators have input boxes, but the first displays its results in a text area where the results change with each calculation. The second re-creates the entire page each time rather than use a text area, the reason it is written to another frame.

I believe that this problem occurs with IE and not Netscape, but I don't see it as a browser problem, or an HTML problem since the code for the text and text boxes is the same for each calculator. Perhaps it has something to do with frames.

Thanks for any ideas,


Philip M
06-04-2003, 08:53 AM
You can specify the font for a TEXT BOX (<input type= "text" font = "whatever"...) in your case Arial, but a TEXTAREA has a default font of Courier. I have yet to find out how to change this. As you say, it seems to be an IE quirk.

06-04-2003, 10:33 AM
Use CSS, I believe that is the unique way to make them look the same. <tag style="font-family: Arial, Helvetica, sans-serif"></tag>, no matter if they are genarated by a .js file or not. Using CSS is a better standard, or at least it looks so to me so far.