[thelist] Re: Compact definition list

[Clive R Sweeney]

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
definitions. 
>> 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
the 
"<dt>". (a) Even if the definition term was short, there was always an
8em 
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
next 
line.

But it was close, so I just eliminated the fixed width, and it worked
like 
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
http://designshift.com/problems/glossary_solution2.html
(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
Designshift