CODEWITHSUNDEEP
htmlcssinternet-explorer-7
alex
alex

Reputation: 490263

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

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

Upvotes: 2

Views: 1399

Answers (4)

user7214985
user7214985

Reputation: 1

I was doing something similar and the above answers were not working. I ended up defining the as display: block; float: none; and seemed to work fine for IE7.

Upvotes: 0

Qasim
Qasim

Reputation: 168

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/

Upvotes: 1

Nicholas Piasecki
Nicholas Piasecki

Reputation: 25583

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.

Upvotes: 1

BalusC
BalusC

Reputation: 1108742

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

Upvotes: 1

Related Questions