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).

Do something like this: 'dt{float:left;clear:left;display:block;width:200px} or so. That will work cross browser if I remember correctly.

I would suggest using em width units instead of px. That way the margin will resize in proportion if the user increases the font size.

True, but the point here is to find a way to style definition lists in a uniform way across browsers, not the choice of units, classes, ids, etc.

Hi, just found your page off Google, looking for info on styling DLs.

Glad to know I'm not alone in finding it a frustrating challenge. I think the biggest bummer is not having a block-level wrapper around each dt+dd chunk.

Anyhow, thanks for the piece.

I really like this approach to laying out forms. Never would have thought of it, and now I use it extensively. I do have a question: I see how you're clearing the float at the end of the CSS definitions. However, if I use a Literal control to write out some text after my DL, it sits to the right of the DL, not underneath it. Any thoughts? Thanks.

Dylan, "floating" is the name of the game so there's gotta be something to clear previous floats. Without seeing your code I can, unfortunately, advise very little. My only advice: make sure you clear floats and have server controls write after them.

Thanks... just found this article after extensive googling, as well as a ton of trial and error (and serious frustration) in getting things to look uniform in IE. Great article!

This is very well done. I am new to definition lists and seemed to have learnt much more scanning your CSS than any other website on Google so far.

Well everything looks nice in IE/FF, but in Opera the dl & dt still can't catch the float. In my case the problem comes from the fact, that I'm using the dt's in a non-fixed width elelments. When I add a width, everything works just fine, but that's not the idea. I'm starting to think that I have to get rid of the dt, but I have to change a lot of code that way! I'll be extremly happy if someone finds a solution for Opera...

Unfortunately, the longer terms version doesn't work in IE 7 as you have it right now. :(

Darn it, you're right. It still works in IE 6/Opera/Firefox but not in IE 7. Yet another browser anomaly to solve. :(

I have used the information provided to use styled definition lists on the job search results page. It can however seem a pain in ass regarding firefox clearing but I guess that is another issue all together.

The issue with IE 7 is the star html hack.

* html dd { float: none;}

IE 7 ignores this but it needs the 'float: none;' style.

Thank you for the tip, Al.

XForms in IE is a little closer now. Check out http://mozzie.sourceforge.net which embeds mozilla's xforms/xhtml/svg engine into IE.
and it's free!

For accessibility, you should also use labels in your dt elements...