Lenght of textfield is not consistence on difference browser

Any way to define the length of a textfield?

I have just set all the field with a width so that they look like clear

and easy to read,
However, When I see the page of mac os, They are totally not the result

in IE of FF,
Does there any way to define it absolutely?


I have already change the size attribute and set the width of the
input.


Thank you

Cylix <cylix2000 (AT) gmail (DOT) com> scripsit:

Any way to define the length of a textfield?

Several ways, but none of them works consistently. You are probably
referring to the width property, which might be suitable for the purpose if
there were a way to use a unit that corresponds to the "width of character".
But there isn't. In HTML, there is, in theory, since if you set <input
type="text" ... size="42">, the number 42 is treated so that the implicit
unit is "average width of characters". The bad news is that this unit has no
clear definition, and browsers interpret the situation in rather different
ways.

The bottom line is: use the size="..." attribute, but make its value
somewhat larger than you expect typical input to be.

I have just set all the field with a width so that they look like
clear and easy to read,

How did you do that? And do you mean that all fields have the same width?
That's not the idea. The idea is that the width also acts as a visual hint
about the kind of input expected.

However, When I see the page of mac os, They are totally not the
result in IE of FF,

It depends on how you have set the width.

Does there any way to define it absolutely?

It absolutely depends on what you mean by "absolutely".

I have already change the size attribute and set the width of the
input.

The size attribute should always be set for a text input field. Setting the
width property in CSS tends to override that setting when CSS is enabled,
but why would you do that? You normally don't have more suitable units in
CSS than the implied unit used in HTML. Sometimes setting width="100%" is a
good choice, though.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

In article <1153911592.362409.270800 (AT) i3g2000cwc (DOT) googlegroups.com>,
Cylix <cylix2000 (AT) gmail (DOT) com> wrote:

Any way to define the length of a textfield?

Like this: <input type="text" width=40 ...[the rest goes here]>

I had a problem with a user ID textfield and a password textfield
appeared the same width in one browser but different widths in
another browser.

What I did was define a CSS class that made the textfields use a
monospace font. Then the lengths are consistent always, determined by
the width attribute in the input tag.

CSS:

..monotext {
font-family: "Lucida Console", Monaco, monospace;
font-size: 91%
}

HTML:

<input class="monotext" type="text" width=40 ...>

About the monotext class: Lucida Console and Monaco are attractive
monospace fonts on Windows and Mac platforms, easier on the eyes
than the default Courier. The font size attribute is unnecessary
but I have found all the browsers I test seem to use a default
monospace size that looks bigger than the normal text.

-A

axlq wrote:

Any way to define the length of a textfield?

Like this: <input type="text" width=40 ...[the rest goes here]

I expect this is what the OP did and that is where the problem lies.

What I did was define a CSS class that made the textfields use a
monospace font. Then the lengths are consistent always, determined by
the width attribute in the input tag.

An alternate method is to set the width in CSS using px, or ems to have

it adapt to font size. This is consistent across browsers regardless of
font choice.

.input-width { width: 12em; }

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jukka K. Korpela wrote:

The size attribute should always be set for a text input field. Setting the
width property in CSS tends to override that setting when CSS is enabled,
but why would you do that? You normally don't have more suitable units in
CSS than the implied unit used in HTML. Sometimes setting width="100%" is a
good choice, though.

Thanks, you do point out a work around method and I have done what I
expect to.

In article <ocadnROhlNE-fFrZnZ2dnUVZ_qCdnZ2d (AT) giganews (DOT) com>,
Jim Moe <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote:

axlq wrote:
What I did was define a CSS class that made the textfields use a
monospace font. Then the lengths are consistent always, determined by
the width attribute in the input tag.

An alternate method is to set the width in CSS using px, or ems to have
it adapt to font size. This is consistent across browsers regardless of
font choice.

.input-width { width: 12em; }

That doesn't work as well for me, because an "em" unit isn't
consistent across browsers, and an "em" unit has little or nothing
to do with actual character width. My suggestion, on the other
hand, sets the width of the text box according to actual character
width of a monospace font, so it's consistent across all browsers to
the monospace font used by those browsers.

-A

axlq <axlq (AT) spamcop (DOT) net> scripsit:

Like this: <input type="text" width=40 ...[the rest goes here]

Why would you use invalid markup, instead of using the size attribute? The
width attribute is undefined in an <input> element. What's worse, if some
browsers recognize it, who knows how they will treat it? They might use 40
pixels, or 40 characters, or something else.

I had a problem with a user ID textfield and a password textfield
appeared the same width in one browser but different widths in
another browser.

Quite catastrophic, is it not? Surely typical users viewed your page on both
browsers and were shocked at the different widths.

What I did was define a CSS class that made the textfields use a
monospace font.

Well, that's an approach that may help in the problem, but we know that it
(when it works - remember the usual CSS caveats) _creates_ a problem: user
input (as well as any prefilled content) will appear in a monospace font.
This is not typical and normal, so it may make the user wonder what is going
on. The problem might be tolerable, but before creating it, I would ask:
what is the original problem, really, and how much does it matter?

About the monotext class: Lucida Console and Monaco are attractive
monospace fonts on Windows and Mac platforms, easier on the eyes
than the default Courier.

Courier is a bitmap font that isn't used that much. Is it still the default
somewhere? I'd say Courier New (which looks rather similar to Lucida
Console) is more common.

The font size attribute is unnecessary
but I have found all the browsers I test seem to use a default
monospace size that looks bigger than the normal text.

Browsers generally use reduced font size for some elements, including
<input>, <code> etc. This is rather poorly documented and not a very good
idea. E.g., it is probably important that the user can see clearly the
characters he has typed. For <code>, the feature is understandable since
<code> is normally rendered in a monospace font, and this typically means
that it looks somewhat bigger than text in a proportional font with the same
font size.

So for <input>, I would rather treat the default size reduction as a problem
rather than as something I should imitate in my CSS code, so I normally use
font-size: 100% for input. Actually, on my computer, your suggested 91%
seems to make the font size _larger_ than without the setting (though not as
large as 100%), whereas 90% gives the default size. (This may sound odd, but
font size rounding effects can be odd.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

In article <q%ayg.26424$Va4.24160 (AT) reader1 (DOT) news.jippii.net>,
Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:

axlq <axlq (AT) spamcop (DOT) net> scripsit:

Like this: <input type="text" width=40 ...[the rest goes here]

Why would you use invalid markup, instead of using the size attribute? The
width attribute is undefined in an <input> element. What's worse, if some

Sorry, I meant size, not width. I make that mistake often in my own
markup, then catch it during validation.

Should I address your other comments? Oh, well, why not. This is
usenet after all.

I had a problem with a user ID textfield and a password textfield
appeared the same width in one browser but different widths in
another browser.

Quite catastrophic, is it not? Surely typical users viewed your page on both
browsers and were shocked at the different widths.

Indeed, the effect was quite visually jarring. You wouldn't believe
how much it bothered me. I feel so much better now for having fixed
it. Now my users won't be asking why I'm incapable of rendering a
userID and password field the same length.

What I did was define a CSS class that made the textfields use a
monospace font.

Well, that's an approach that may help in the problem, but we know that it
(when it works - remember the usual CSS caveats) _creates_ a problem: user
input (as well as any prefilled content) will appear in a monospace font.

That's perfectly acceptable for a login and password field.

Courier is a bitmap font that isn't used that much.

Wrong, Courier is the name of a typeface that pre-dates the web. I
used the term in that general context. Of course, Courier New is
the scalable non-bitmap variety.

I'd say Courier New (which looks rather similar to Lucida
Console) is more common.

Courier New looks nothing like Lucida Console.

The font size attribute is unnecessary
but I have found all the browsers I test seem to use a default
monospace size that looks bigger than the normal text.

Browsers generally use reduced font size for some elements, including
input>, <code> etc.

Generally yes. But as soon as you define the size as 1em, the monospace
font looks disproportionately large on all browsers I tested. So I use
0.91em. This brings it down to a comparable size, and if any browser
wants to define 1em for a monospace font as something smaller than what
I've set, then 91% of that won't be a big difference.

So for <input>, I would rather treat the default size reduction as a problem
rather than as something I should imitate in my CSS code, so I normally use
font-size: 100% for input. Actually, on my computer, your suggested 91%
seems to make the font size _larger_ than without the setting (though not as
large as 100%), whereas 90% gives the default size. (This may sound odd, but
font size rounding effects can be odd.)

Yes, I noticed that too. Opera tends to make all text smaller than
other browsers by default, so I settled on 91% as a good value that
shows up large enough in Opera but still slightly smaller than 100%
in other browsers.

-A

axlq wrote:

.input-width { width: 12em; }

That doesn't work as well for me, because an "em" unit isn't
consistent across browsers, and an "em" unit has little or nothing
to do with actual character width.

True. It is based on character height. See

<http://www.w3.org/TR/CSS21/syndata.html#em-width>. It certainly produces
a much more consistent result than using the "size" attribute for <input>.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)