CODEWITHSUNDEEP
cssinternet-explorer-7
cdonner
cdonner

Reputation: 37708

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

alt text
(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?

Upvotes: 1

Views: 2284

Answers (3)

Schmooooo
Schmooooo

Reputation: 11

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.

Upvotes: 1

David
David

Reputation: 682

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.

Upvotes: 1

jaywon
jaywon

Reputation: 8234

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.

Upvotes: 1

Related Questions