html - How to get usage(progress) bar to display properly in IE

Question

<div class="dd">
<div class="blue" style="WIDTH:$s%">$s%</div>
<div class="green" style="WIDTH:$v%">$v%</div>
<div class="red" style="WIDTH:$g%"><br>$g%</div>
</div>

In FF the three different elements are displayed on a single status bar, showing the accumulation of the quantities. However, in IE, it's all messed up. I get separate bars for each element and the colors and alignment are all off.

The CSS:

/*These are for multiple element types on same status bar */ 
     div.dd { 
   /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
    margin-left:20%; 
}

div.dd div.blue { 
    /*position: relative; */
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}
div.dd div.red { 
    /*position: relative; */
    background: url("red.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}

    div.dd div.green { 
    /*position: relative; */
    background: url("green.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
} 

Answer 1

What are $s, $v and $g doing in your HTML; and the <br>, for that matter?

If I remove the <br>, and replace those $ values by actual percentages that add up to 100% it works just fine for me in IE6, except for the left margin. But that's caused by the doubled float-margin bug.

The way to fix that margin, according to that article, is to set the display property on div.dd to inline.

Speaking of which, you can remove all those display: block properties you're using, because the display property is ignored for floats (except by IE, to some extent, as the above bugfix demonstrates).