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 [[email protected]]
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/
