Hello,
I have posted the following message before but got no replies...
I am trying to format an HTML definition list with CSS so that it
appears as follows, but am having the following problem: 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.
I have tested the example with mozilla 1.2.1. Complete code
is provided below so you can see what I mean. 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?
----------------------------------+
| gnat: any of various small |
| usually biting dipteran |
| flies |
| |
| gnu: either of two large |
| African antelopes |
| (Connochaetes gnou and |
| C. taurinus) with a |
| head like that of an |
| ox, short mane, long |
| tail, and horns in |
| both sexes that curve |
| downward and outward |
| hello |
| world: A standard greeting |
| displayed by some of |
| the smallest computer |
| programs. |
+---------------------------------+
Thank you for your replies,
Neil
(HTML/CSS code follows...)
<html>
<head>
<title>Definiti ons</title>
<style type="text/css">
/*dt { color: red; width: 140px; float: left; : left; }*/
/*dd { color: blue; width: 180px; text-align: left; }*/
dl { }
dt { color: red; width: 140px; padding: 4px;
float: left; clear: left; }
dd { color: blue; width: 180px; padding: 4px;
text-align: left; overflow: auto; }
</style>
</head>
<body>
<p>
<table>
<tr>
<th>
Definition Lists...
</th>
</tr>
<tr>
<td>
<dl>
<dt>
gnat:
</dt>
<dd>
Any of various small
usually biting dipteran
flies
</dd>
<dt>
gnu:
</dt>
<dd>
Either of two large
African antelopes
(Connochaetes gnou and
C. taurinus) with a
head like that of an
ox, short mane, long
tail, and horns in
both sexes that curve
downward and outward
</dd>
<dt>
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:
</dt>
<dd>
Definition of the long long... term.
</dd>
<dt>
hello
world:
</dt>
<dd>
A standard greeting
displayed by some of
the smallest computer
programs.
</dd>
</td>
</tr>
</table>
</p>
</body>
</html>
Comment