Why does this simple floated definition list not work in IE7, and how do I fix it?

Question

This is a very simple dl.

HTML

<dl id="photo-attributes">
<dt>Edition</dt>
<dd>200</dd>
<dt>Ratio</dt>
<dd>3:1</dd>
<dt>Location</dt>
<dd>Great ocean road, Victoria</dd>
<dt>FStop</dt>
<dd>F-32</dd>
<dt>Exposure</dt>
<dd>3 minutes 40 seconds</dd>
</dl>

CSS

#photo-attributes {
  margin: 1em 0;
  overflow: hidden;
}

#photo-attributes dt {
  width: 10em;
  float: left;
  clear: left;
  font-weight: bold;
}

#photo-attributes dd {
  float: left;
}

It works as expected in everything except IE7. The dd float left on one line. I can't recall what bug this is in IE7.

How do I fix this? Thanks

Answer 1

This is related to the haslayout bug. But after all, the dd does not need to be floated left. Remove it.

Answer 2

IE7-specific markup (note float removed and trigger hasLayout):

#photo-attributes dd {
    zoom: 1;
}

If you remove the float for all browsers and don't trigger hasLayout for IE7, then you might not get the result you expect if the dd happens to have a line break/is "taller" than the dt to its left.

Answer 3

Definition lists are sometimes a pain to figure out but i've blogged on a very simple fix which does away with floats and works in most common browsers. It involves using the display: inline-block style which make the element behave as an inline element but forces it to have block level styling.

http://www.qasimalyas.co.uk/definition-lists-making-them-behave/