- From: Rene Saarsoo <nene@triin.net>
- Date: Mon, 02 Jul 2007 02:25:21 +0300
- To: public-html@w3.org
The main problem (for me) with <dl>, is that it's pretty hard to style with CSS. Let's take a simple example: <dl> <dt>apple</dt> <dt>orange</dt> <dd>fruits</dd> <dt>fly agaric</dt> <dd>mushroom</dd> <dd>toxic stuff</dd> <dt>cucumber</dt> <dt>tomato</dt> <dt>broccoli</dt> <dd>vegetables</dd> </dl> Say I want to surround each group with a border, to achieve something like this: +--------------+ |apple | |orange | | fruits | +--------------+ +--------------+ |fly agaric | | mushroom | | toxic stuff | +--------------+ +--------------+ |cucumber | |tomato | |broccoli | | vegetables | +--------------+ Looks like a simple thing to accomplish, but until now I haven't been able to do that. The following CSS is almost there, but doesn't manage the case with multiple <dd>-s. dd {padding: 0 0 0 1em; margin: 0} /* top right bottom left */ dt { border-style: solid solid none solid; margin-top: 0.5em; } dt+dt { border-style: none solid none solid; margin-top: 0; } dd { border-style: none solid solid solid; } I'm not entirely sure that it's a real-world problem - I would probably just use three separate <dl>-s to accomplish it. But just wanted to point out the styling problems that <dl> has. -- Rene Saarsoo
Received on Sunday, 1 July 2007 23:25:52 UTC