I've written before on styling definition lists (which I use to create semantic HTML forms). I described two CSS options to style the definition list:
- Positioning the definition title absolutely and the data relatively.
- Float the definition title in the definition data left margin.
The absolute option gets you in trouble when you for example want to dynamically change your page. The float option gets you in trouble when you want to support Internet Explorer 5 and 6. You will need to fix the 3px pixel gap and need to be lucky not to be running in to other problems.
Last week I've had it with these options and thought up a better way to style definition lists. Just use negative top margin on the definition data:
form dt {
width: 120px;
text-align: right;
}
form dd {
margin: -18px 0 2px 0;
padding-left: 128px;
min-height: 25px;
}
* html form dd { height: 25px; }
You can use the * html hack here because Internet Explorer 7 will ignore it and will support min-height.
Posts
No comments:
Post a Comment