CSS Quirk in IE8 Compatibility Mode

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;
    disp开发者_开发技巧lay: 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?

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.

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.

That's tabular data. There's a whole tag set designed specifically for displaying tabular data, and it's quick, easy, flexible and powerful. Unfortunately, this tag set seems to have fallen out of favour due to issues other than the display of tabular data. It's a shame - a table really is the best way to display tabular data.