Re: CSS and definition lists (bug?)...

nzanella (AT) cs (DOT) mun.ca (Neil Zanella) wrote:

I have posted the following message before but got no replies...

Maybe it's because you didn't post a URL. It's easier to look at someone's
problem if you can just access a page by URL, instead of constructing a page
first (thinking why, oh why, the poster, who surely had tested his problem,
didn't post a URL).

Or maybe because it didn't get through - I cannot see which previous posting
you are referring to. (A Message-ID would have helped.)

I am trying to format an HTML definition list with CSS

Using definition list markup (<dl> element) in HTML is logical, in
principle, if you actually have a list of definitions. However, the default
rendering is rather poor, and attempts to modify it using CSS often
encounter serious obstacles. But to start with, you should at least use
_valid_ <dl> markup. The snippet you posted lacks the </dl> tag and has a
spurious </p> tag after the table element (presumably </p> is meant to match
a <p> before the table, for some odd reason, but it cannot, due to HTML
syntax).

when the
definition term (<dt>) on the left is too long, as in the HTML
code posted below, the whole definition list gets messed up.

The question arises why the term is very long - such a situation often
indicates that a "definition list" doesn't really define anything. Your
example is "A long long long long long long long long long long long long
long long long long long long long long long long long term:", but maybe you
have something real in the real example.

Anyway, if some terms can be long - and that's surely possible - then why do
you make things more difficult by setting widths, even using px units, and
rather small values at that? When the font size is large, problems will
arise with width: 140px even for rather modest length of terms. Assuming
there is a reason - and surely there might be - to set the width (for
example, when floating something), the em unit is to be preferred.

I have tested the example with mozilla 1.2.1.

IE 6 shows it differently. And Opera even more differently.

Anyone know
how I can fix the list so that the top of the offending
dd> is aligned with the bottom of the offending <dt
as in the "hello world" definition in the example
given in the ASCII diagram below?

Given the diagram alone, it seems that you would like to have the definition
data start at the same vertical level as the last line of the definition
term. This sounds a bit odd - and I don't see how you could suggest such a
thing in CSS.

But comparing the browser renderings of your example, it seems that you are
referring to the problem that on Mozilla, the definition data flows on the
right of the definition terms so that it may get misplaced - the definition
of "hello world" (is that really a _term_?) is placed to the left of the the
term "A long long ...".

Basically, <dl> lists have idiosyncratic renderings on browsers, and when
you try to change the rendering, you will encounter problems with browser
defaults (such as default margins that may vary a lot) and with browser
bugs.

table
tr
th
Definition Lists...
/th
/tr

Is this really adequate markup? You have a table with one <th> cell and one
<td> cell. It sounds you would need a real heading (like <h2>) and just the
list.

Anyway, if you really have a definition list, then structuring _it_ as a
table might be a better practical idea than <dl> markup. After all, it can
adequately be described as a table with two columns, one for terms, another
for the definion of the term. And then you would simply have a table with
rows like

<tr><td><dfn>gnat</dfn></td> <td>Any of various small
usually biting dipteran flies.</td> </tr>

(It's debatable whether the first column should consist of <th> elements
with scope="row". This has a minor impact on the CSS side of the matter,
since <th> vs. <td> affects default rendering.)

That way, you avoid the danger of serious misplacement, and you can easily
make presentational suggestions e.g. using the vertical-align property.

--
Yucca, http://www.cs.tut.fi/~jkorpela/