Re: controlling length of text-type INPUTs

Robert,

Yes, you can control input text boxes with style sheets. I do, and find it
invaluable. Using style sheets, you can even set the font that is used in
the text box, so you can make the input more uniform (IE uses Arial (I
think) by default, while Netscape uses Courier). Setting both to a font you
want and size, help to match up their sizes. Simply make a style and use it
as you would any style class within the tag. Of course, they still won't
match PERFECTLY, but a workaround is to add additional style coding in your
stylesheet as such:

>From a stylesheet I use:

input {font: 10pt courier, 'courier new';}
.in355 {width: 355px;}
.inbtn {font: 10pt verdana, arial, geneva, helvetica, sans-serif;}

The actual HTML:

<input class="in355" type="text" name="Address1" size="43">
<input class="inbtn" type="submit" value="Submit Request">

Here's what happens:

Setting the font in "input" makes both browsers use the same font in their
boxes. This helps to match up the sizes a bit. The classes of "in***" are
used for MSIE ONLY, as it can render a text box based on PIXELS, not just
flaky SIZE, but Netscape cannot. I make the box the size I want, match it to
a pixel-width, and voila! both browsers display virtually identical text
input boxes. For browsers that ignore in-tag styles, the boxes render using
the "old" format (such as Netscape), but still apply the FONT set in the
initial style tag. As seen above, you can also do this to buttons, so you're
not stuck with whatever font the browser chooses to render text in on the
button. Keep in mind that by NOT changing the font for the buttons
specifically, they will render as the font chosen for INPUT.

The above fragments create a text box 355px wide (iin MSIE) or 43 spaces
wide in Courier 10pt (Netscape) -- virtually the same. The user-enterred
text is in 10pt Courier on both. The submit button is in 10pt Verdana.

Hope this helps!
Kehvan M. Zydhek

----- Original Message -----
From: "Robert Clendaniel" <robert(at)baylogic.com>
To: <hwg-techniques(at)mail.hwg.org>
Sent: Monday, May 22, 2000 12:13 AM
Subject: controlling length of text-type INPUTs


> We have a page with name & password entry text boxes inside a
> small table.  For layout reasons it is necessary to control the
> width of the input field.
>
> However code like this -
>
> <INPUT NAME="name" TYPE="text" SIZE=12>
>
>  - renders an acceptable length in IE 4.X and 5.0, but a much
> longer (and unacceptable) length in NN 4.X, at least on my
> systems.
>
> Thus my question - is there some way (stylesheets perhaps?) to
> control the length of text input boxes so they're roughly the
> same in all browsers.
>
> Or is this just another insoluble incompatibility problem?
>
> Robert L. Clendaniel
> BayLogic Internet Marketing Inc.
> robert(at)baylogic.com
> http://www.baylogic.com/
>
>

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA