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

Yesterday made a form, still use table layout, because the personal feeling table layout table is good (the pursuit of Div refactoring, not equal to completely discard table).

Get up this morning and think about the layout of the form in a different way. Then the selection of DL, DD, DT, as follows:

XHTML section:

<dl>
<dt>公司名称：</dt>
<dd><input name="text" type="text" value="广州骏宝实业有限公司" size="50" /> <span class="red">*</span></dd>
<dt>公司工业类别：</dt>
<dd><select name="select"><option>计算机和消费电子 </option></select>
<select name="select"><option>空气调节器</option></select> <span class="red">*</span></dd>
<dt>公司介绍：</dt>
<dd><textarea name="textarea" cols="100" rows="9">　　广州骏宝实业有限公司创始于1990年，是集科研、制造、销售、服务于一体，拥有研究开发中心、模具设计制造中心、电子和电路控制设计制造中心、注塑加工和产品整机生产基地的规模化经济实体。骏宝公司生产基地约占地 30000平方米，拥有精良的设备，强大的生产能力。公司按照现代化企业的规范组织和管理，坚持诚信、创新、勤奋、进取的企业精神，不断发展壮大。
　　 骏宝公司人才荟萃，现有职工326人，拥有研发 ... </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!