Page obeys CSS tables in all browsers except IE8

HTML & CSS
1

I am trying to shift away from deeply nested HTML tables as a way to format content and I have mixed success with my first attempt using CSS tables.

The page renders 3 table cells (cellnav, cellmain, cellgoog) properly in Google Chrome, Safari 5, and Firefox 3.6.8. Yet IE8 just stacks this content as blocks following each other down the page. Here is markup page from Visual Studio 2008 SP1:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="Head1" runat="server">
	<title>Display Ad Details</title> 
    <link href="~/IEStyles.css" type="text/css" rel="stylesheet"/>	
    <style type="text/css">
    .container{display: table}
    .row{display: table-row}
    .cellnav {display: table-cell; width: 10%; vertical-align: top;}
    .cellmain{display: table-cell; width: 75%; vertical-align: top; border: solid 1px black;}
    .cellgoog{display: table-cell; width: 15%; vertical-align: top;}
    .contactinfo{display: table;}
    </style>
	<script type="text/javascript" src="~/Functions/JSFunction.js"></script>
</head>
<body>
<form id="Form1" method="post" runat="server">
<div class="container">
<div class="row">
<div class="cellnav">
Some nav here
</div>
<div class="cellmain">
<asp:imagebutton id="btnUp" runat="server" ImageUrl="~/Images/ArrowUp.gif" ToolTip="Display Previous Ad">
</asp:imagebutton>
<asp:label id="lblPrev" runat="server">Prev</asp:label>
Display Ad #<asp:label id="lblRecNo" runat="server"></asp:label>
<asp:label id="lblNext" runat="server">Next</asp:label>
<asp:imagebutton id="btnDown" runat="server" ImageUrl="~/Images/ArrowDown.gif" ToolTip="Display Next Ad">
</asp:imagebutton>
<asp:label id="Label1" runat="server" CssClass="lblItemName">Ad Id:</asp:label>
<asp:label id="lblAdID" runat="server" CssClass="lblItemValue"></asp:label>
<asp:label id="Label2" runat="server" CssClass="lblItemName">Ad Type:</asp:label>
<asp:label id="lblAdType" runat="server" CssClass="lblItemValue"></asp:label>
<uc1:LoadCategories id="LoadCategories" runat="server"></uc1:LoadCategories>
<uc1:ManageTitle id="ManageTitle" IsReadOnly="True" runat="server"></uc1:ManageTitle>
<asp:label id="lblPageHdr" runat="server"></asp:label>
Display Ad Details
<asp:label id="lblMsg" runat="server"></asp:label>
Ad Details: 
<asp:panel id="pnlPrice" Runat="server">
 <asp:label id="lblPriceHdr" runat="server" CssClass="lblItemName">Price:</asp:label>
 <asp:label id="Label4" runat="server" CssClass="lblItemName">$</asp:label>
 <asp:label id="lblPrice" runat="server" CssClass="lblItemValue"></asp:label>
</asp:panel>
<asp:panel id="pnlYear" Runat="server">
<asp:label id="Label8" runat="server" CssClass="lblItemName">Year:</asp:Label>
<asp:label id="lblYear" runat="server" CssClass="lblItemValue"></asp:label>
</asp:panel>
<asp:panel id="pnlISBN" Runat="server">
<asp:label id="Label7" runat="server" CssClass="lblItemName">ISBN:</asp:label>
<asp:label id="lblISBN" runat="server" CssClass="lblItemValue"></asp:label>
</asp:panel>
<asp:panel id="pnlDate" Runat="server">
<asp:Label id="lblDateHdr" runat="server">Event Date:</asp:Label>
<asp:Label id="lblDate" runat="server"></asp:Label>
</asp:panel>
<asp:panel id="pnlZipCode" Runat="server">
<asp:label id="Label6" runat="server" CssClass="lblItemName">Destination Zip Code:</asp:label>
<asp:label id="lblZipCodeTo" runat="server" CssClass="lblItemValue"></asp:label>
</asp:panel>
<asp:label id="Label3" runat="server" CssClass="lblItemName">Description:</asp:label>
<asp:label id="lblDesc" runat="server" CssClass="lblItemValue"></asp:label>
<div id="divDesc" ></div>
<asp:linkbutton id="btnMoreInfo" runat="server" Visible="False">Get More Details</asp:linkbutton>
<asp:label id="Label5" runat="server" CssClass="lblItemName">Ad Expires:</asp:label>
<asp:label id="lblExpDate" runat="server" CssClass="lblItemValue"></asp:label>
<asp:Label ID="lblImgDesc" Runat="server" CssClass="lblItemValue"></asp:Label>
<asp:imagebutton id="imgBtnPicture" runat="server" CssClass="lblItemValue"
ToolTip="Click here to enlarge the picture."></asp:imagebutton>
<asp:linkbutton id="cmdBackImg" runat="server" Font-Underline="True" Text="Back">Back</asp:linkbutton>
<asp:linkbutton id="cmdMoreImg" runat="server" Font-Underline="True" Text="More">More</asp:linkbutton>
<hr />
<asp:label id="Label9" runat="server" CssClass="lblItemName">Affiliation Filter:</asp:label>
<asp:label id="lblSector" runat="server" CssClass="lblItemValue"></asp:label>
<hr />
<div class="contactinfo">
<asp:label id="Label12" runat="server" CssClass="lblItemName">Contact Info: </asp:label>
<asp:label id="Label11" runat="server" CssClass="lblItemName">Name:</asp:label>
<asp:label id="lblContactName" runat="server" CssClass="lblItemValue"></asp:label>
<asp:label id="Label10" runat="server" CssClass="lblItemName">Phone:</asp:label>
<asp:label id="lblContactPhone" runat="server" CssClass="lblItemValue"></asp:label>
<asp:label id="lblContactEmail" runat="server" CssClass="lblItemValue" visible="false"></asp:label>
<asp:label id="lblZipHdr" Runat="server">Zip Code: </asp:label>
<asp:label id="lblZipCode" runat="server" CssClass="lblItemValue"></asp:label>
<asp:label id="lblCityState" runat="server" CssClass="lblItemValue"></asp:label>
<asp:linkbutton id="btnShowSellerAds" runat="server" 
    ToolTip="Show All Ads of this Seller" 
    CausesValidation="False"
    CssClass="LinkButtonNavy">
    Show All Ads of this Seller
</asp:linkbutton>

<asp:linkbutton id="btnContactSeller" runat="server" 
    ToolTip="Contact Seller" Width="180px" 
    CausesValidation="False"
    CssClass="LinkButtonLightBlue">
    Contact Seller
</asp:linkbutton>
<asp:LinkButton id="btnEmailFriend" runat="server"
    CausesValidation="False" 
    cssclass="LinkButtonLightBlue" Width="180px">Email friend about this Ad
</asp:LinkButton>
</div>
</div>
<div class="cellgoog">
<script type="text/javascript"><!--
    google_ad_client = "pub-8221180277342034";
    /* StarterDefaults-120x600, created 7/22/10 */
    google_ad_slot = "0009020541";
    google_ad_width = 120;
    google_ad_height = 600;
            //-->
</script>
<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<asp:button id="cmdPrev" runat="server" Text="Back to List"></asp:button>
<asp:button id="cmdSearch" runat="server" Text="Revise Search"></asp:button>
</div>
</div>
</form>
</body>
</html>>

I just read “Everything You Know About CSS Is Wrong!” by Rachel Andrew & Kevin Yank but is there something you have to do special to make IE8 behave as the other browsers with CSS tables?

2

Hi,
You have an incomplete doctype since it is missing the referring url.
That will throw IE8 into quirks mode.

Working with the basic structure of the code you posted w/out all the asp this seems to be working fine.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Display Ad Details</title> 
<style type="text/css">
    .container{
    display: table;
    border:solid 1px #000;
    }
    .row {display: table-row}
    .cellnav {
    display: table-cell; 
    width: 20%; 
    vertical-align: top; 
    }
    .cellmain {
    display: table-cell;  
    vertical-align: top; 
    border:solid 1px #000;
    border-width: 0 1px;
    }
    .cellgoog {
    display: table-cell; 
    width: 20%; 
    vertical-align: top; 
    }
    .contactinfo {display:table;}
</style>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="cellnav">
            <p>Some Nav Here</p>
        </div>
        <div class="cellmain">
            <p>Lorem ipsum dolor sit amet consectetuer tincidunt adipiscing Quisque quis consectetuer. 
            Justo lacinia tempus tincidunt eu urna eu Vestibulum pretium ante vel. Lorem augue ut 
            tincidunt ornare Curabitur urna id vitae et wisi. Augue nunc risus Aenean Curabitur ante 
            at nisl interdum senectus ornare. Dapibus Lorem Maecenas nonummy ac elit massa Quisque 
            Nulla elit sollicitudin. Tempus elit a feugiat Suspendisse habitasse wisi laoreet nec et 
            mauris. Ut tincidunt pede risus orci lorem.</p>
            <hr />
            <div class="contactinfo">
                <p>Contact Info</p>
                <p>Name</p>
            </div>
        </div>
        <div class="cellgoog">
            <p>Google Ads</p>
        </div>
    </div>
</div>

</body>
</html>
3

It might be better to show us the generated HTML (View > Page Source or similar) so we don’t have to wade through all that ASP stuff. I presume it doesn’t end up in the final HTML?

In a way, jumping from HTML Tables to CSS tables is a frying-pan-to-fire situation. It’s probably not the best solution.

4

Thank you so much for catching this, Ray. You were absolutely correct. Moving forward now! Thanks again.