Definition List Formatting Problem

I’m using some CSS code for definition list formatting that I saw on a couple of css formatting sites. The resulting output places the dt data on the same line and to the left of dd data. It works fine in Firefox when data is present in the dd’s. When there isn’t (I’m using php to fill the dd from a table of optional columns) the last item dd data floats up. I could put some sort of filler text in the field if the data was missing, but I’m hoping to find a cleaner approach.

The CSS:


dl.detail-list
{
	width: 17.0em;
}
dl.detail-list dt
{
/*	clear: both;*//* This breaks the formatting */
	float: left;
	width: 8em;
	padding: 5px;
	font-weight: bold;
	text-align: right;
}
dl.detail-list dd
{
	margin-left: 8.5em;
	padding: 5px;
	width: 25em;
}

The html:


    <dl class="detail-list">
		<dt>eMail:</dt>
        <dd><?php echo $email ?></dd>
		<dt>First Name:</dt>
		<dd><?php echo $first_name ?></dd>
		<dt>Last Name:</dt>
		<dd><?php echo $last_name ?></dd>
       	<dt>Street 1:</dt>
		<dd><?php echo $street1 ?></dd>
       	<dt>Street 2:</dt>
		<dd><?php echo $street2 ?></dd>
        <dt>City:</dt>
        <dd><?php echo $city ?></dd>
        <dt>State:</dt>
        <dd><?php echo $state ?></dd>
        <dt></dt>
        <dd><a href="client_edit.php">Edit Account Details</a></dd>
    </dl>

The street1, street2, city, and state variables are often empty. When they are the ‘Edit Account Details’ floats up between street2 and city.

Thanks for any help,
Curt

Well, if I didn’t solve my own problem. I added height: 1.0em; to the dl.detail-list dd element.