Display the definition of the term and the description of the embedded

Question

I use a list of definitions for some elements on the page and need to display them in a string, for example: they usually look like this:

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

and I need them to look (pay attention to a few DDs):

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

I can make them work fine by using float in moz, but no matter what I tried, they will not work in IE, I usually get something like:

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

Someone found a solution to this problem, I would really like to avoid adding additional markup where possible, but not to change them to an unordered list of ideas :(

Thanks in advance

Answer 1

Note: you need to avoid spaces between DD elements for this to work.

No need to hack IE8 +:

dd, dt{ display: inline; margin: 0; } dd:before { content: ' '; /* space them */ } dt:before { /* insert line break before <dt> */ content:"\A"; white-space:pre; } dt:first-child:before { /* disable line break before the first <dt> */ content: none; } 

If you don’t need to support IE8, skip the fourth CSS rule and just use this selector for the third: dt:not(:first-child):before

The result should look something like this: (demo)

 DT DD DD DT DD DD 

If you want to be healthy, you can replace the second rule with the following:

 dd + dd:before { content: ', '; /* add comma between definitions */ } dt:after { content: ':'; } 

The result should be something like this: (demo)

 DT: DD, DD DT: DD, DD 

Answer 2

default style sheet

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

those. 6 and 7 style sheets:

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

IE6

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

Hope this helps.

Answer 3

Have you tried to clear float in dt? Like this:

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

---

Edit:. This is a cross-browser solution that checks:

 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, this br is quite nasty and not semantic. Hope someone else can come up with a better solution. :)

Answer 4

just provide them with the whole layout , the easiest way is to use the CSS property .yourstuff {zoom: 1; }

Answer 5

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

CSS

 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, albeit kludgy */ display: inline; } dd:after { content:"; "; } dd:last-child:after { content:""; } 

HTML

 <div id="content"> <dl> <dt>first dt</dt><dd>first dt first dd</dd><dd>first dt second</dd> <dt>second dt</dt><dd>second dt first dd</dd><dd>second dt second</dd> <dt>third dt</dt><dd>third dt third dd</dd><dd>third dt second</dd> </dl> </div> 

Link to a working example tested under FF 3 and Opera 9.x:
http://www.davidrhysthomas.co.uk/so/dls.html