[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