1

I'm trying to style a definition list so that dt tags start new rows, and can be followed by any number of dd elements on the same row. In modern browsers this is as simple as

dt {
    float:left;
    clear:left;
}
dd {
    float:left;
}

In IE7, however, if the clearing element has float, subsequent floats are not affected. (example) Is there any workaround for this bug? I've been looking around, but none of the solutions usually suggested seem applicable:

  • since this is a definition list, I can't wrap elements on the same rows in a div.
  • I don't want to use an invisible non-floated clearing element - it would have to be a dt or dd, and the whole point of using a definition listr instead of a table or span-br soup is to have semantic markup, which would be messed up by purely presentational dt/dd elements.
  • as far as I can see, approaches based on triggering hasLayout (thus triggering inline-block behavior) such as this don't work when the number of elements per row is not fixed. (Also, I would prefer not to bother with stripping whitespace.)
  • I couldn't get this solution to work with dl instead of ul; even setting display:list-item didn't help.

Is there any other way to force IE7 to mimic standard float behavior?

Community
  • 1
  • 1
Tgr
  • 27,442
  • 12
  • 81
  • 118
  • I think I may have misunderstood you original post when I answered, but in any case, I don't see the behavior you describe in firefox with the above CSS. Code and output: http://imgur.com/mlLiy.png – Nathan Taylor Oct 21 '10 at 21:07
  • @Nathan Taylor: sorry, I had the two styles swapped up (though the [example](http://jsfiddle.net/bmNQe/) I gave was correct). Fixed now. – Tgr Oct 22 '10 at 17:12
  • Have you tried inline-block yet? – meder omuraliev Oct 22 '10 at 17:13
  • Do you *have* to use the dt/dd? – Nathan Taylor Oct 22 '10 at 21:25
  • @Nathan Taylor: I would prefer to, it is the semantically meaningful way in various situations where you have a label and one or more items (e. g. form fields) associated to it. I can use the `ul`-based solution I mentioned if all else fails, but I thought maybe there is a hack for this. (It is hard to find workarounds for IE7 float problems by googling, because it has some very common float bugs, and results for those drown out the less common ones.) – Tgr Oct 23 '10 at 08:24

1 Answers1

0

Try using inline-block instead of floats.

dl { 
    line-height:1.2em; 
    padding-left:1em; 
} 
dt { 
    display:block; 
    margin:0 0 -1.2em -1em; 
} 

dd { 
    display:inline-block; 
    display:inline !ie; 
    margin-left:1em; 
}

Credit to deathshadow who came up with this.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • Could you give an example or more details? – Tgr Oct 21 '10 at 20:00
  • The example is in the link.... ( i was the one that added it ). Do you have trouble understanding the link? – meder omuraliev Oct 21 '10 at 20:01
  • That is a description of how to achieve inline-block behavior in IE6/7. How do you use inline blocks to simulate floats? More specifically, how do you tell an inline block to start on a new line? – Tgr Oct 22 '10 at 17:15
  • Oh, misunderstood the purpose. Hm, you could throw an element in between before each `dt` to clear it, but you don't want to do that. You could also use multiple `dl` elements, but maybe you don't want to do that. I don't think there is a proper clean solution to this. – meder omuraliev Oct 22 '10 at 17:38