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).

_{(source: heeroz.com)}

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.