Haciendo un <dl> claro antes que nunca <dd> en IE 7?

Question

Estoy intentando hacer un <dl> para definir los íconos que estoy usando en la página. Lo quiero para que cada ícono se encuentre dentro de un <dt> y su definición esté dentro del siguiente <dl>. Después de cada definición de icono, quiero un salto de línea. Simple, ¿verdad? Bueno, ¡IE7 dice que no!

Aquí es mi HTML:

 <dl style="display: block;" id="surveysIcons" class="icons"> 
      <dt class="clearfix"><span class="icon"><img alt="Complete" title="" src="images/fiq_complete.png"></span></dt> 
      <dd>You have completed the survey</dd> 

      <dt class="clearfix"><span class="icon"><img alt="Incomplete" title="" src="images/fiq_incomplete.png"></span></dt> 
      <dd>You have missed the survey</dd> 
     </dl> 

Aquí es mi CSS:

dl.icons { 
    margin: 0 0 1em 0; 
    padding: 0; 
    width:100%; 
    overflow:hidden; 
    line-height:24px; 
    clear: both; 
} 
dl.icons dt { 
    clear:left; 
    margin:0; 
    float:left; 
    min-height:24px; 
} 
dl.icons dd { 
    padding: 3px; 
    margin: 0 0 0 5px; 
    float:left; 
    min-height:24px; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix {display: inline-block;} /* for IE/Mac */ 

Mi método aquí está flotando tanto el <dt> y <dd> izquierda, y la limpieza en cada <dt>, que, por desgracia, no funciona en IE 7.

He intentado el llamado mágico clearfix, pero fue en vano. Esto funciona en Firefox e IE 8.

¿Alguna otra idea que podría hacer que esto funcione (preferiblemente sin cambiar demasiado HTML)? ¡Gracias!

Answer 1

quitar float: left de dl.icons dd