Definition List

From CSS Discuss

Jump to: navigation, search

A useful Html Element . W3C spec

See also Tables Vs Lists.

Contents

Formatting as tables

A Definition List can be considered as a 2-column table, and there are various ways of using CSS to make it look more like one:

Floating

Making the DT into a Floated Block :

dt { width: 10em; float: left; }
dd { margin-left: 10em; }

Relative positioning

But remember the Ie Absolute In Relative problem!

dl { position: relative; }
dl dt { width: 10em; position: absolute; left: 0; }
dl dd { margin-left: 10em; }

Using Display

Only works in Opera and Moz. a solution by Kevin W:

dt { display: run-in; }
dd { display: block; }

Though he says it only works in Opera, Mozilla actually gets it right too.

Bugs

A bug in IE6 (perhaps also other versions) is that when the DD spans multiple lines, the next floated DT will be smack on top of the wrapped lines of the DD. This is probably not so much a bug using definition lists, as much as it is a bug using floats. The solution to this is to give every DT and every DD a border-top, where you can of course blend it with the background color if you wish to hide it.

Examples

I've set up an example, works in Moz/Opera.

-- Micah Sittig

Personal tools