CSS Quirk in IE8 Compatibility Mode

Question

I am trying to show name-value pairs in a table cell as shown below in IE8 compatibility mode (with outlines - DIVs are red, SPANs are green, TDs are orange).

Markup and CSS:

<td width="40%">
    <div class="info_row">
        <asp:Label ID="lblWSPONumber" runat="server" Text="WS PO Number"
               CssClass="edit_control_label"></asp:Label>
        <asp:Label ID="tbWSPONumber" runat="server"/>
    </div>
    <div class="info_row">
        <asp:Label ID="lblCustomerPONumber" runat="server" 
            Text="Customer PO Number" CssClass="edit_control_label"></asp:Label>
        <asp:Label ID="tbCustomerPONumber" runat="server" />
    </div>
    <div class="info_row">
        <asp:Label ID="lblBulkOrderDate" runat="server" Text="WS PO Date"
            CssClass="edit_control_label"></asp:Label>
        <asp:Label ID="tbBulkOrderDate" runat="server" />
    </div>
    <div class="info_row">
        <asp:Label ID="lblSHOrderDate" runat="server" Text="SH PO Date"
            CssClass="edit_control_label"></asp:Label>
        <asp:Label ID="tbSHOrderDate" runat="server" />
    </div>
</td>

.info_row
{
    margin: 0px 0px 0px 0px !important;
    float: left;
    clear: left;
}
.edit_control_label
{
    width: 150px;
    float: left;
    display: inline-block;   
    margin-right:15px; 
    margin-top:3px;
}

This works fine and as expected in IE8 and FF. It seems that in IE7 all DIVs after the first one are not 150px wide, but only extend to the beginning of the 2nd SPAN in the first DIV. The 2nd element in the block is then wrapped underneath the blue text. What is causing this?

Answer 1

Try adding another CSS class for the second <asp:Label> and setting a width on that as well as setting the width of the .info_row <div> to accommodate the total margin and both asp:Labels(span tags) sizes.

Answer 2

The main problem would be that you need to declare widths for the elements or IE will cry bloody murder. If you want to only apply the width to IE 7 and lower put "#" in front of your declaration, like so:

#width: 150px;

Also, I would be suprised if that aligns properly in any IE version except 8.

You can get the same effect as floating with:

text-align:left;
display:inline;

Hope this helps, David.