Electronic Books

Note this CSS produces a variation of the form layout here??”
this time the labels sit next to the text ?¬? elds instead of above, which
reduces the vertical height of the form.
The only way in which the markup is different from Chapter 6 is a
small change to the Submit button input, which will use a graphic
instead of the usual system-generated button. To add the graphic to
the input tag, we use the following code

You can see how this looks in Figure 7.16.
Here??™s the CSS for this form, which you can ?¬? nd in the library in
sign_up_form_2_col.css.
#tiny_form_vert * {
margin:0;
padding:0;
}
form#tiny_form_vert {
?¬‚ oat:left;
margin:.5em 0 0 0em;
}
form#tiny_form_vert .formsection {
width:150px;
?¬‚ oat:left;
padding:.25em;
}
sign-in form starts here
markup for form elements goes
here
end register div
end nav_inner div
removes margins and padding off
all elements in this form
sets a ?¬? xed width for IE
makes the formsection divs
enclose ?¬‚ oats
STYLIN??™ WITH CSS - CHAPTER 7 264
#tiny_form_vert label {
?¬‚ oat:left;
width:38%;
margin-top:.35em;
color:#000;
font-size:.7em;
}
#tiny_form_vert input[type="image"] {
margin:0;
display:block;
}
#tiny_form_vert p {
display:none;
}
#tiny_form_vert p.error {
display:block;
color:red;
font-size:.


Pages:
281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305