The width setting is large enough to contain the largest of the text labels.
form {
width: 350px;
}
label {
float: left;
text-align: right;
font-weight: bold;
width: 95px;
}
The form controls??”the input elements??”are floated right. Because only input elements
within the div rows should be floated (rather than all of the input elements on the page),
the contextual selector .row input is used. (The containing divs have a class value of
row.) The width setting is designed to provide a gap between the labels and input elements.
.row input{
float: right;
width: 220px;
}
Finally, to make a gap between the rows, a .row class
is added and given a margin-bottom value.
.row {
margin-bottom: 5px;
}
Note the use of the clearing device, the clearFix class value, as outlined in
Chapter 7??™s ???Placing columns within wrappers and clearing floated content??? section.
GETTING USER FEEDBACK
325
8
The method works fine in all browsers except Internet Explorer, which doesn??™t apply
margin-bottom correctly. However, the slightly different layout in Internet Explorer can
largely be fixed by adding the following in a style sheet attached via an IE-specific conditional
comment:
.row {
clear: both;
margin-top: 5px;
}
Alternatively, add the following:
.clearFix {
display: inline-block;
}
Sending feedback
In this section, you??™ll check out how to send form data using a CGI script and PHP. Once
users submit information, it needs to go somewhere and have a method of getting there.
Pages:
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422