5em;
font-weight:normal;
clear:none;
}
IDWIMIE6, so the button is on the
left in IE6
styles for the checkbox and radio
button sets
note: this is 25 x 85% (inherited
value) so really only 20.4ems
creates spacing betwen adjacent
checkboxes and between each
checkbox and its label
resets the inherited value
resets the inherited value
STYLIN??™ WITH CSS - CHAPTER 6 200
The form element, which is the top level element of the rest of the
form, is set to a width of 24 ems. The formsection divs around each
label and control set is un-dimensioned, so each expands to the
width of the form. By setting the label??™s display property to block,
and removing its margins with the exception of a little space above
it (?¬? rst highlight in code above), the three text-entry ?¬? elds and their
labels stack nicely down the page. As long as we don??™t set the text-
?¬? eld widths (as determined by the size attribute in the XHTML)
wider than the 24 ems of the form element, this is a pretty solid and
simple layout.
Things are a little more complex when we get to the radio buttons
and checkboxes. Not only do we need a label for each group of
checkboxes or radio buttons, but a ???sub-label??? is needed for each
individual element in the group. So I wrap up each set of radio buttons
and their individual labels in a div with the class buttongroup.
Pages:
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239