CSS font size designation for input fields
johkar
be an HTML answer. In addition, the answer for this only needs to work with
IE 4+
I applied a stylesheet to a userid and password input fields on a login
page. The stylesheet set font-family and used points to designate the font
size.
<input type="text" maxlength="7" size=6>
<input type="password" maxlength="7" size=6>
I received a report today that someone's 7 character entry into the userid
field did not quite fit visually into the field when typed(Laptop, 1024x763
resolution, Windows NT, small font setting on operating system and IE 5
browser).
I know I could probably just set the size attribute larger, but I am
wondering why it appears ok in all instances except on this persons laptop
(meaning ok on desktop PC's). Should I use pixels instead of points for
font-size? Is this a CSS issue or something else. I should mention that I
did increase the size to "7". but it did not help.
John
Jukka Korpela
><input type="text" maxlength="7" size=6>
That markup suggests a field with a visible width of 6 average-width characters
and with a browser-imposed limit of at most 7 characters. I find that somewhat
illogical. Why allow 7 characters but show only 6?
>I received a report today that someone's 7 character entry into the userid
>field did not quite fit visually into the field when typed
That was to be expected, wasn't it?
>I know I could probably just set the size attribute larger, but I am
>wondering why it appears ok in all instances except on this persons laptop
Oh? On my Netscape 4.5 on Win98 for example, a field with size="6" shows
exactly six characters, not seven - just as I expected. On IE 5.0, the font is
proportional by default, and if I type M's, I can type just four of them before
it starts scrolling horizontally, though with i's, it's just half of the box
width before the maxlength attribute strikes.
>Should I use pixels instead of points for font-size?
No, you should use neither. You haven't actually said anything about the style
sheet(s) you're using, so it's impossible to say what's wrong with them.
>Is this a CSS issue or something else.
Both. In HTML, you should use logical values for maxlength and size. That means
7, if the form handler truncates the fields to that length, i.e. 7 is the
maximum number of significant characters. There's surely no reason to make the
size attribute _smaller_. And making it larger isn't probably a good idea
either. But in CSS, you could use a declaration like
font-family:Courier,monospace;
for the fields, to increase the odds of making browsers use a monospace font so
that the visual width of the box corresponds to the intended maximum number of
characters to be entered. Cf. to
http://www.hut.fi/u/jkorpela/forms/present.html#inputwidth
--
Yucca, http://www.hut.fi/u/jkorpela/
Qui nescit tacere nescit et loqui
johkar
that this is a 'www' newsgroup, I guess I am just dumbed down because I
started using style sheets on our Intranet (Windows and IE 5 shop) and
learned bad habits there. Because of this I have taken liberties just
because "it works." That is where my problem started as you so aptly
pointed out with the size and maxlength issue using this stylesheet"
{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt }<style
type="text/css">
<!--
input { font-family: Arial, Helvetica, sans-serif; font-size: 9pt}
-->
</style>
<form>
<input type=text size=6 maxlength=7>
</form>
It only worked in all but the case described below on our Intranet (could be
others I now realize). As far as when to use pixels, points, %, em or
others I will admit to being confused as to what is right. Seems to me
there isn't much agreement...even in this newsgroup.
Anyway, thanks for taking the time to respond.
John
Jukka Korpela <Jukka....@hut.fi> wrote in message
news:fr1b2tggnj2ve7vk1...@4ax.com...
johkar
Thanks for the reply and now I am back for more punishment. While I realize
that this is a 'www' newsgroup, I guess I am just dumbed down because I
started using style sheets on our Intranet (Windows and IE 5 shop) and
learned bad habits there. Because of this I have taken liberties just
because "it works." That is where my problem started as you so aptly
pointed out with the size and maxlength issue using this stylesheet"
<style type="text/css">
<!--
input { font-family: Arial, Helvetica, sans-serif; font-size: 9pt}
-->
</style>
<form>
<input type=text size=6 maxlength=7>
</form>
It only worked in all but the case described below on our Intranet (could be
others I now realize). As far as when to use pixels, points, %, em or
others I will admit to being confused as to what is right. Seems to me
there isn't much agreement...even in this newsgroup.
Anyway, thanks for taking the time to respond.
John
> Jukka Korpela <Jukka....@hut.fi> wrote in message
> news:fr1b2tggnj2ve7vk1...@4ax.com...