Re: DI element

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