CSS Challenge: Styling Definition Lists

Posted on January 11, 2005  |  

Posted in Design

16 comments

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:

A definition list with a longer description

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:

A definition list with longer terms

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

16 comments

Anne
on January 12, 2005

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


Nigel Ramsay
on January 12, 2005

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.


Milan Negovan
on January 13, 2005

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.


Mike Purvis
on January 24, 2005

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.


Dylan Thomas
on April 15, 2005

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.


Milan Negovan
on April 16, 2005

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.


Kris
on April 18, 2006

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!


Johan De Silva
on July 13, 2006

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.


Nickey Kolev
on August 2, 2006

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


Jennifer Kyrnin
on November 19, 2006

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


Milan Negovan
on November 20, 2006

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


Chris
on November 30, 2006

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.


al
on January 29, 2007

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.


Milan Negovan
on January 29, 2007

Thank you for the tip, Al.


Peter
on January 31, 2007

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!


Shane
on May 14, 2008

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