Forum Moderators: open

Message Too Old, No Replies

Text Input Boxes Too Big with IE/Win ME Combo

         

peterinwa

1:10 am on Jun 4, 2003 (gmt 0)

10+ Year Member



Since I upgraded to Windows ME the text boxes on my screen are much too big with Internet Explorer. With Netscape, they are just the right size to hold the number of characters that fill them.

For example:

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

With Internet Explorer three characters only fill the left side of the box.

Thanks for any ideas. It's making it impossible to design webpages. Peter

le_gber

8:48 am on Jun 4, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello peterinwa,

have you thought of using CSS to define the widht of the textboxes

put that in your stylesheet:

.formfields
{
width: 10px;
}

and in your html tag just add

<input type=text size=3 maxlength=3 border=1 class="formfields">

Just modify the size in px and it should look the same in all browser. I sometime also use the font family and size to make sure the text in the fields is always the same: textarea seems to use serif font.

You could also use the CSS border style although it's not supported in NS 4.78 and below (and also above may be)

Hope this helped

Leo

peterinwa

2:08 pm on Jun 4, 2003 (gmt 0)

10+ Year Member



Thanks Leo. I have not used CSS before. Where do I put:

.formfields
{
width: 10px;
}

In <head>?

Also what is the syntax for specifying a font and where does it go?

Thanks, Peter

P.S. I have to get the font the same in both calculators first, or it wouldn't work to have the width the same.

le_gber

5:10 pm on Jun 4, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi,

Have a look here

h*tp://www.w3schools.com/css/default.asp

There's some tutorials for CSS.

Also there's a CSS forum on webmasterworld (great place ain't it :) )
[webmasterworld.com...]

The css can be put in the <head> tag but it's best to put them in a separate file with the .css extension (ie mystylesheet.css). And what you put in the head is:
<link rel="stylesheet" href="mystylesheet.css" type="text/css">

and this goes in the mystylesheet.css:
.formfields
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
width: 10px;
}

There is a lot of thing that you can control with CSS, and it's now quite widely supported by browsers. Have a good read and good luck (if you encounter any pbs simply ask on the CSS forum there are some CSS guru hanging there ;)

Leo

peterinwa

9:54 pm on Jun 4, 2003 (gmt 0)

10+ Year Member



Thanks so much for the help. I did it with your examples, and I peeked at amazon.com for another example of how CSS looked on a page. And I'm saving this post as a reference to the CSS forum for the future.

It turned out -- after trimming down hundreds of lines of coding to see what was causing the problem -- that the text boxes looked fine when I wrote them to the same frames page. But when I did a parent.xxx.document.write to xxx, the text boxes looked funny.

The CSS code fixed it. Thanks!

le_gber

7:17 am on Jun 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No pbs, glad to have helped. :)

Leo