Professional Web Design: Techniques and Templates, Fourth Edition

Building the Form Row by Row 381
Figure 14.8
How the checkbox appears in different browsers if it is not assigned the a5-disabled-checkbox class.
how the checkbox looks in different browsers if it is merely assigned a background
color, as with the a5-disabled-field class. It illustrates how the background
color does not make up a consistent height in the left and right examples.
This is why the a5-disabled-field class was created. It adds three pixels of padding
to the top of the checkbox field for compliant browsers, so it appears like
the left example in Figure 14.8 for all browsers. Listing 14.7 shows the code that is
added to build the two rows.
Listing 14.7
XHTML Code for Status and Unlimited Rows
Unlimited:
Unlimited:
Adding the Purchase Date Row
The Purchase Date row shows how an image can be included to the right of the
form field. It is simply placed to the right of the field, as opposed to being floated
to the right. If the designer were to get more technical, it could be assigned a few
pixels of padding to the top so it is placed at the same height for all browsers.
A container is wrapped around the image to provide 10 pixels of padding
to the left. Listing 14.8 shows the code used to render the row.
Listing 14.8
XHTML and CSS Code for Purchase Date Row
Purchase
Date:
Game Developing GWX