Fare uno <dl> chiaro prima di sempre <dd> in IE 7?

Question

Sto provando a fare un <dl> per definire le icone che sto usando sulla pagina. Lo voglio in modo che ogni icona si trovi all'interno di un <dt> e la sua definizione sia all'interno del seguente <dl>. Dopo ogni definizione di icona, voglio un'interruzione di riga. Semplice, vero? Bene, IE7 dice no!

Ecco il mio 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> 

Ecco il mio 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 */ 

Il mio metodo qui è fluttuante sia il <dt> e <dd> sinistra, e di compensazione ad ogni <dt>, che, purtroppo, non funziona in IE 7.

Ho provato il cosiddetto magico clearfix, ma senza successo. Funziona in Firefox e IE 8.

Altre idee che potrebbero rendere questo lavoro (preferibilmente senza modificare troppo HTML)? Grazie!

Answer 1

rimuovere float: left da dl.icons dd