CSS combat: Using DL, DD, DT to do a Web page form

XHTML section:

<dl>
<dt> Company Name:</dt>
<dd><input name= "text" type= "text" value= "June Bao Industrial Co., Ltd. Guangzhou" size= "/> <span" "Red" >*</span> </dd>
<dt> Industrial Category:</dt>
<dd><select name= "Select" ><option> Computer and Consumer electronics </option></select>
<select name= "Select" ><option> air conditioner </option></select> <span class= "Red" >*</span ></dd>
<dt> Company Introduction:</dt>
<dd><textarea name= "textarea" cols= "rows=" "9" > Guangzhou June Bao Industrial Co., Ltd. was founded in 1990, is a scientific research, manufacturing, sales and service in one, with research and development Center, Mold Design and manufacturing center, electronic and circuit control design and manufacturing center, injection molding processing and product production base of large-scale economic entities. June Bao Company's production base covers an area of about 30000 square meters, has excellent equipment, strong production capacity. Companies in accordance with the norms of modern enterprise organization and management, adhere to integrity, innovation, diligence, enterprising spirit of enterprise, and constantly grow and develop.
June Bao Company talent, the existing staff of 326 people, with research and development ... </textarea> <span class= "Red" >*</span>
</dd>
</dl>

CSS section:

dl{padding-left:14px;}
dt{float:left;font-weight:bold;padding:12px 0 4px;}
dd{text-align:left;height:auto;padding:8px 0;}
input,select{Vertical-align:middle;color: #333333; background: #ffffff; font:12px Arial, Helvetica, Sans-serif;}
Textarea{color: #333333; background: #ffffff; font:12px Arial, Helvetica, Sans-serif;line-height:150%;overflow:auto}

Note: for DL, DT, DD settings are recommended not to use height and row height (line-height), in the FF will produce dislocation, because IE and FF are adaptive, we recommend the use of DT, DD padding properties to locate!