IE7 (IE8 Compatability Mode) bug: crazy amound of width applied to a floated element that is parent to another float.

Question

Here's my problem. It looks perfect in Firefox, Safari, IE8, but in IE7 and IE8 comparability mode, it adds about 4000px of width to the div.team elements nested within the list item. the problem goes away if i remove the span.score elements.

The image attached shows the score in the first box in white number text. The top image is the way it's supposed to look. The bottom is IE7.

I've been trying to figure this out for hours. I even tried making the list a bunch of divs in case it was a weird IE7 list item bug, but I got the exact same results.

Here's my html:

    <ul class="selected" data-league="ncaaf">
        <li>
            <div class="time">THU 12:30PM</div>
            <div class="teams">
                <div class="team">AUB (21) <span class="score">10</span></div>
                <div class="team">MSST <span class="score">22</span></div>
            </div>
        </li>
        ...

Here's my CSS:

.boxList ul {
    float:left;
    margin:0 0 0 0;
    heigth:40px;
    width:5000px;
    clear:left;
    display:none;
}
.boxList ul.selected {
    display:block;  
}

.boxList li {
    float:left;
    height:40px;
    padding:0 5px;
    min-width:56px;
    background:url(../images/scoreSchedBoxTile.png) repeat-x;
    border:1px solid #000;
    list-style-type:none;
    margin:0;
    font-size:9px;
    line-height:13px;
    font-weight:bold;
    cursor:pointer;
    position:relative;
}

    .boxList li .time {
        text-align:center;  
    }
    .boxList li .teams {

    }

    .boxList li .team {
        text-align:left;

        color:#000;
        clear:left;
        line-height:13px;
        height:13px;
    }

    .boxList li .score {
        font-weight:bold;
        text-align:right;
        color:#fff;
        float:right;
        display:block;
    }

Answer 1

try using:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 2

The width on your divs is set to 100%, so the div is stretching to 100% width and filling all available horizontal space. You can fix this by applying a fixed width to your divs.