 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / July 2006Lenght 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@gmail.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.  SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > 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. >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 >>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; } Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) >> What I did was define a CSS class that made the textfields use a >> monospace font. Then the lengths are consistent always, determined by [quoted text clipped - 5 lines] > > .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 >> .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>. Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) axlq <axlq@spamcop.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.) SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ >axlq <axlq@spamcop.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 |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.