Today, a friend on Twitter posted a frustration he was experiencing. He wanted to set a list-style on a definition list, but it wasn’t cooperating. According to the spec, a list item -li- in an ordered or unordered list has a marker. A definition list, which has two parts—a dt and dd (or multiple dd)—is typically rendered by user agents on two lines, with the second slightly indented, but with no list marker. But with CSS, it doesn’t have to stay that way.
I’m sharing the fix here in case someone else needs the same visual rendering. One of the lesser used values of the display property is list-item. Placing this property/value on the dt does not change it to block rendering, it simply allows you to set a list marker using the list-style property. If it were the dd you wanted markers on, that would work as well. The support for it is good. I didn’t test but PPK’s compatibility chart reports that Internet Explorer 6 and 7 both support it as long as the the default value for the element is inline. A dt is inline by default, so I expect it will work (a dd is block, so you might have trouble in IE 6/7 if you want to place it there).
Depending on your overall page and list styling, you may need to give the dt a bit of left margin—you can also place the margin on the dl. I made a quick example of list markers on definition lists showing all three scenarios.
Happy coding!
