Professional Web Design: Techniques and Templates- P9: This is the must-have book for designers who want to expand their skills and improve the quality of their designs. Learning CSS technology and continually improving one's design and developer skills is essential for every Web designer in today's marketplace. The goal of Professional Web Design: Techniques and Templates is to educate beginning-to-intermediate Web designers on the various issues involved with Web design through general discussion, case studies, and specific tips and techniques | 382 Chapter 14 Case Study A CSS Form input type text name purchase_date id purchase_date style width 70px span style padding-left 10px img src images width 16 height 15 alt border 0 span div Adding the Comments Row The code required to produce the Comments row is almost identical to several of the other rows barring one difference the row includes the TEXTAREA tag which does not force the height of the row for compliant browsers such as Firefox. The designer therefore needs to force the height of the row. One way to do so is to add a local style to the parent DIV shown in Listing . Without declaring the height of the row the row would look like the right side of Figure . The left side illustrates what the row looks like if a height is defined. Listing XHTML and CSS Code for Comments Row div class a5-row-1 style height 80px label title Comments for comments Comments label textarea name comments id comments rows 3 cols 40 textarea div Purchase Date 33 Purchase Date Comments O Sample Text Option 4 O Sample Text Option 5 Sample Text Option 6 Sample Text Option 2 Sample Text Option 3 submit Cancel Sample Text Option 1 Z Sample Text Option 4 O Sample Text Option 5 d Sample Text Option 6 Options Tn Select Figure The Comments row and how it will appear in compliant browsers when a height is and isn t defined when using the textarea tag. Please purchase PDF Split-Merge on to remove this watermark. Building the Form Row by Row 383 Adding the Options to Select Rows The Options to Select rows add two more situations a designer may or may not come across. The first is to include only a section title and nothing more in a row. This is accomplished by merely not including a form field. The second is a little more involved. It requires two things 1 define appropriate margins for positioning in the parent DIV which in this case sets the bottom margin to 20 pixels and the left margin to 80 pixels and 2 use a table to lay out the .
