[thelist] Re: Compact definition list

Clive R Sweeney clive at designshift.com
Sun Oct 12 13:43:43 CDT 2003

Clive R Sweeney wrote:

>> All in all, a nice, semantically correct solution, I think. But
>> there's one thing still missing - the extra space between
>> I could try "<br /><br />" after each definition, but that's too much

>> space. I'd like to get something more like a "break and a half",

Hassan Schroeder suggested:
> I agree with rudy that adding a presentational tag (<br/>) when it's 
> not needed is ugly -- if you change your mind about spacing later, you

> have to go back and remove them all, rather than just changing your 
> style sheet, and isn't that much of the point of using CSS?  :-)

> But /with/ CSS, a break-and-a-half is easy --

> dt {
>      float: left;
>      width: 8em;
>      font-weight: bold;
>      clear: left;
>      margin-top: .5em;
>      }
> dd {
>      clear: right;
>      margin-top: .5em;
>      }

Hassan, it didn't quite work, mainly due to the fixed width of 8em for
"<dt>". (a) Even if the definition term was short, there was always an
margin to the start of the actual definition. (b) If the term didn't fit

into the 8em space, it looked weird to have the term wrapping to the

But it was close, so I just eliminated the fixed width, and it worked
a charm. There are a few other small changes/additions, but it's 
essentially your solution:

#glossary dt {
	float: left;
	font-weight: bold;
	clear: left;
	margin-right: .5em;
#glossary dd {
	clear: right;
	margin: 0 0 .6em 2em;

And no <br /> tags necessary. It's *exactly* what I wanted. Excellent! 
Thank you very much.

You can see it at
(it seems the site is down right now, but I'll post the page as soon as
it's back up.)

::. clive
Clive R Sweeney

More information about the thelist mailing list