Display definition term and description inline

Question

Hi all,

I am using a definition list for some elements on the page and need them to display inline, e.g.: they normally look like:

<def term>
        <def desc>
        <def desc>

and I need them to look like (note the multiple DD's):

<def term> <def desc> <def desc>
<def term> <def desc> <def desc>
<def term> <def desc> <def desc>

I can get them to work fine using floats in moz but no matter what I try they will not work in IE, I typically get something like:

<def term> <def desc> <def desc> <def desc> <def desc> <def desc> <def desc>
<def term>
<def term>

Has anyone found a solution to this problem, I would really like to avoid adding extra markup where possible, but short of changing them to an unordered list im out of ideas :(

Thanks in advance

Answer 1

I don't have the time to really go through it, but his persons has found the solution, although it appears to utilize a lot of hacks

explanation of solution

page showing solution in action

Answer 2

Have you tried clearing the float in the dt's? Like this:

dt { clear: left; }
dd { float: left; }

---

Edit: Here's a cross-browser solution that validates:

dd,dt{ display: inline; }

<dl>
 <dt>1</dt><dd>1.1</dd><dd>1.2<br/></dd>
 <dt>2</dt><dd>2.1</dd><dd>2.2<br/></dd>
</dl>

However, as you can see, that br is pretty nasty and non-semantic. Hopefully someone else can come up with a better solution. :)

Answer 3

default stylesheet

dt,dd { float: left;}
dd + dt { clear: left; }

ie 6 & 7 stylesheet:

dt { float: none;} dd { position: relative; top: -19px; /depending on your line-height/ }

ie6

http://code.google.com/p/ie7-js/

Hope that helps.

Answer 4

just give them all layout , most simple way is to use CSS property .yourstuff { zoom: 1; }

Answer 5

This works (admittedly only tested on FF 3.x.x and Opera 9.x, both on Ubuntu 8.04):

    <style>

p   {display: block;
     }

dl  {display: block;
    margin: 0;
     }

dt  {display: block;
    width: 7em;
    border-right: 1px solid #ccc;
    margin: 0;
     }

dd  {display: none;
    margin: 0;
    position: relative; /* 'position: absolute' would probably work better, and lose the line break left by the 'position: relative;' */
    top: -1em; 
    left: 8em;
     }

dt:hover + dd,
dt:hover + dd + dd   /* Couldn't find a way to target all sibling dds of a dt without the + operator (and listing all of them), but it works, wlbeit kludgily */
    {display: inline;
     }

dd:after
    {content: "; ";
     }

dd:last-child:after
    {content: "";
     }

    </style>

...

    <div id="content">

<dl>

<dt>first dt</dt><dd>first dt's first dd</dd> <dd>first dt's second</dd>

<dt>second dt</dt><dd>second dt's first dd</dd> <dd>second dt's second</dd>

<dt>third dt</dt><dd>third dt's third dd</dd> <dd>third dt's second</dd>

</dl>

    </div>

Working example at: http://www.davidrhysthomas.co.uk/so/dls.html