CSS Challenge: Styling Definition Lists

Building data entry forms on the web is a pain. To be more precise, formatting them is a pain. When you develop a desktop app you have numerous visual tools to aid you with pixel-perfect design of dialog boxes, wizards, forms. Things aren’t as simple on the web.

There’s really no universally accepted way to style forms. A SimpleQuiz posted by Dan Cederholm a while back sparked an interesting discussion about it and showed that there was right or wrong technique. It all depends on what it is you’re building.

Personally, I consider XForms to be a great undertaking.

XForms… provides a new platform-independent markup language for online interaction between a person (through an XForms Processor) and another, usually remote, agent. XForms are the successor to HTML forms, and benefit from the lessons learned from HTML forms.

As one might suspect, Internet Explorer does not support XForms, and Microsoft has no willingness to deal with it which undermines the search for an acceptable common denominator of building better Web forms.

For a long time now developers have been using tables to arrange Web form controls. Tables have been around for a long time and gained consistent support among browsers. However, whether they are still suitable for new mobile devices is questionable.

Enter Definition Lists

Russ Weakley published an outstanding article on definition lists. One of his samples demonstrates how to build a calendar of events with a definition list. Also, Dan Cederholm talks about using definition lists for laying out forms in his book Web Standards Solutions.

I looked around for an example of styling a definition list with CSS to give it a two-column Web form look, but every sample I found had the same problem (I’ll talk about it shortly).

Let’s do a little exercise. Below are two HTML snips of the same hypothetic Web form.

<dl>
    <dt>First name:</dt>
    <dd><input type="text" id="fname" /></dd>
    
    <dt>Last name:</dt>
    <dd><input type="text" id="lname" /></dd>

    <dt>Email:</dt>
    <dd><input type="text" id="email" /></dd>
</dl>

<table>
    <tr>
        <td>First name:</td>
        <td><input type="text" id="fname" /></td>
    <tr>
    <tr>
        <td>Last name:</td>
        <td><input type="text" id="lname" /></td>
    </tr>
    
    <tr>
        <td>Email:</td>
        <td><input type="text" id="email" /></td>
    </tr>
</table>

The one with a definition list is smaller. Also, I think it’s much more structurally sound than a table.

The Challenge

Every sample of a styled definition list I found assumed that the definition term, <dt>, is some short text, no longer than one line, while the definition description, <dd>, either has several lines of text or a large HTML control. In a generalized way, it looks like this:

When building Web forms the situation might be drastically different—you might easily have a longer <dt>. For example, the text in <dt> wraps into 3 lines, while the corresponding <dd> has a single line <input> control. This situation is illustrated below:

I got both layouts to work consistently in Mozilla, Safari, Camino, and Konqueror. I approached it by floating left both the <dt> and <dd>. This way the top of each <dt> would align perfectly with the top of its <dd>.

The exercise would’ve been too easy if it weren’t for Internet Explorer/Win (surprise!) Floating both sides wasn’t cutting it for some reason, so I had to simply push <dd>s with a left margin.

Took me quite some time to get this working in the mentioned browsers. Yet, to my surprize, Opera still doesn’t like either set of CSS rules. It stacks up all <dd>s and ignores margins and floats. I haven’t been able to figure out how to satisfy Opera.

Take a look at my sample page in various browsers and see it for yourselves.

This is what I need your help with, folks. Maybe I misunderstand some nuances of canceling floating or something. Or maybe there’s some bigger issue here. Please, post your solution here if you have an idea how to fix the sample page and make styled definition lists work across all major browsers (I’m very curious what’s up with Opera in particular).