Faire un <dl> effacer avant avant <dd> dans IE 7?

Question

J'essaie de créer un <dl> pour définir les icônes que j'utilise sur la page. Je le veux pour que chaque icône soit à l'intérieur d'un <dt> et sa définition est à l'intérieur du <dl> suivant. Après chaque définition d'icône, je veux un saut de ligne. Simple, non? Eh bien, IE7 dit non!

Voici mon 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> 

Voici mon 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 */ 

Ma méthode ici est flottant à la fois la gauche <dt> et <dd> et compensation à chaque <dt>, qui, malheureusement, ne fonctionne pas dans IE 7.

J'ai essayé le soi-disant clearfix magique, mais en vain. Cela fonctionne dans Firefox et IE 8.

D'autres idées qui pourraient éventuellement faire ce travail (de préférence sans trop modifier HTML)? Merci!

Answer 1

supprimer float: left de dl.icons dd