On Jul 30, 2009, at 12:45 AM, Andy Stevens wrote: > I have a page with an existing unordered list > > <p>In these terms,</p> > <ul> > <li><strong>'content'</strong> means the stuff you are looking at on > this Site.</li> > <li><strong>'you'</strong>, <strong>'your'</strong> and > <strong>'yours'</strong> means you, the idiots accessing this > Site.</li> > <li><strong>'we'</strong>, <strong>'us'</strong> and > <strong>'our'</strong> means Big Corporation Inc.</li> > </ul> > > (more or less) that I reckon, from a semantic viewpoint, ought really > to be a definition list. So as a first step I swapped it for > > <p>In these terms,</p> > <dl> > <dt><strong>'content'</strong></dt> <dd>means the stuff you are > looking at on this Site.</dd> > <dt><strong>'you'</strong>, <strong>'your'</strong> and > <strong>'yours'</strong></dt> <dd>means you, the idiots accessing this > Site.</dd> > <dt><strong>'we'</strong>, <strong>'us'</strong> and > <strong>'our'</strong></dt> <dd>means Big Corporation Inc.</dd> > </dl> > > However, I need to preserve the way it looked before, as the powers > that be like it that way.
In that case, I suspect you'll have to stay with an unordered list, unless you don't need to support IE 6 & 7. > Any suggestions of the easiest/best way to make it appear as if it's > still using ul & li? > I tried > > dt {display:list-item;} > dd {display:inline;} > > but that still puts the definitions on the line below. I tried using > dt {display:list-item; float:left; clear:left;}, but all the > definitions run together one after the other instead of following > their terms. dd {display:block;} works a bit better with that, but > the definition lines still wrap to the edge of the term rather than > looking like a continuous paragraph of text (and the vertical > alignment is out between the two parts in each case). That would be the way to go, if the content of the <dt>'s is more or less the same length, and there is enough space. If the content of the <dt> wraps, then things will look odd. And IE 6 and 7 will drop the list-marker due to 'hasLayout' on the <dt>. Another option is using generated content (to generate a list marker and a line-break) and display: inline. But that won't work in IE 6 & 7. IE 8, Safari 3+, Opera 9+, and Firefox 3+ should be OK with this. dt {display:inline; margin: 0 .2em 0 0; background:#ccc;} dd {display:inline; margin:0;} dt:before { content: '\25cf'; color: rgb(153, 153, 153); text-indent: 0; margin: 0 .1em -.2em -.95em; padding: .07em .18em 0 0; font-family: 'Lucida Grande', Symbol; } dd:after { content: '\A'; white-space: pre; } This test file has the 3 cases: http://dev.l-c-n.com/_temp/definition-list-genContent.html Philippe --- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/