Making a

clear before ever

in IE 7?

I'm trying make a

to define the icons I am using on the page. I want it so that every icon is inside a

and it's definition is inside the following

. After every icon definition, I want a line break. Simple, right? Well, IE7 says no!

Here is my 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>

Here is my 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 */

My method here is floating both the

and

left, and clearing at every

, which, unfortunately, does not work in IE 7.

I have tried the so-called magical clearfix, but to no avail. This works in Firefox and IE 8.

Any other ideas that could possibly make this work (preferably without changing too much HTML)? Thanks!