[thelist] CSS: Tip: Scalable Form Elements
Frank
framar at interlog.com
Mon Nov 26 00:31:56 CST 2001
<tip type="CSS" author="Frank Marion">
Cascading style sheets are wonderful for the long desired control
over the appearance of forms. Often, one is encouraged to use the
'em' unit for the display of text, but when it is applied to form
elements such as inputs, or buttons, the results leave something to
be desired. A text input, or button 1.75 ems high can produce an
outrageously large element, and the buttons will look particularly
lopsided in Mac IE 4.x.
The solution is to use the '%' unit of measure. Form elements are
typically 200% the height of text. Using this measure will cause your
forms to scale nicely, and to permit them to remain in proper
proportion with the text they may contain. Here is an example of a
class for a text input and submit (or button) input I've found works
well in Netscape 4.x+ and IE 4.x+ on both Mac and PC displays.
(Copied out of a current style sheet, left additional definitions for
the purpose of illustration.)
--
.FormButton {
font-size: 0.75em;
font-family: Arial,Verdana,sans-serif;
height: 175%;
margin-top: 5px;
margin-right: 2px;
}
.FormInput {
font-size: 0.85em;
font-family: Arial,Verdana,sans-serif;
height: 175%;
width: 100px;
}
--
</tip>
--
Our best destiny, as planetary cohabitants, is the development
of what has been called "species consciousness" - something over
and above nationalisms, blocs, religions, ethnicities.
Frank Marion Framar Studios
frank at framarstudios.com http://www.framarstudios.com
More information about the thelist
mailing list