On Wed, 04 Feb 2004 04:33:39 GMT, Brian
<us*****@julietremblay.com.invalid-remove-this-part> wrote:
Andre Majorel wrote: I'm trying to make a compact <dl> class ŕ la troff .TP where you
have
Term Definition of the term.
Longer Term
Definition of the longer term.
i.e. if the <dt> text is shorter than the margin-left, the <dd>
is on the same line. Otherwise, the <dd> goes on the next line.
It's too late to test, so you'll have to test this yourself. Assign a
width to <dt> (in em units) and float it left. If your terms are all 1
word, that's all you should have to do. However, if they contain spaces,
you'll need to look into support for css word break control. Or use
in place of normal spaces.
One problem - if there are several <dt>'s, you need to set widths for
each, that's cumbersome.Unless you have a lot of short terms, it might
work, but you'll have to test it in a lot of browsers to be sure one
doesn't indent differently. The <dd> indent as tested on IE6 is only
2.5em, but I see in Opera 7.23 it's a little different. I suspect other
browsers will handle it their own way.
Aha - Brian, the float works well in Opera, but in IE the <dd> is a little
too far to the right. Seems like there's a tiuny bit of padding between
the first character of the <dd> and the left border, but padding-left: 0;
has no effect...
To the original poster: what was wrong with the usual display of the
definition list? Is this on-the-same-line rendering necessary or just that
it looks cool?
See, the hassle is that it's not like the <dt> element is over once the
last character is done, the box of the <dt> extends the whole line. (Set
visible borders on dt and see for yourself.) That's a feature, actually -
block elements are rectangles with a width as long as one line would be
before it wraps, and that's a good thing we rely on all the time. The
trick you have to do here is set a new width for the <dt> in question so
you can scoot the <dd> up next to it. As you can see, it's harder than it
looks.
Between the varying size of the indent we find on the <dd> and the weird
behavior when we start floating this stuff around, we get in a mess of
trouble, and with all these uncontrollable variables it might be wiser to
leave it to the browser to render than to risk an unfortunate rendering.
