IE8 Not Rendering Properly In IE8 Standards Compliant Mode

Question

I have created some nested tables using the following markup where the first table contains an example of a row. The span inner HTML ultimately gets replaced with an image that is selected by the user through a dropdown menu.

<table class="outer">
<tr>
    <td>
        <table class="column" id="left_column">
            <tr>
                <td>
                    <table class="cell" id="t1">
                        <tr>
                            <td>
                                <asp:Literal runat="server" ID="t1r2c1" />
                            </td>
                            <td class="image">
                                <span id="s1" runat="server">
                                    <asp:PlaceHolder ID="p1" runat="server">
                                    </asp:PlaceHolder>
                                </span>
                            </td>
                            <td>
                                <asp:Literal runat="server" ID="t1r2c3" />
                            </td>
                            <td class="gray">
                                <asp:Literal runat="server" ID="t1r2c4" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table class="cell" id="t2">
                        <!-- ... -->
                    </table>
                </td>
            </tr>
        </table>
    </td>
    <td>
        <table class="column" id="rightColumn">
            <!-- ... -->
        </table>
    </td>
</tr>
</table>

Here is the relevant CSS:

.outer
{
    border: none;
    margin-left: auto;
    margin-right: auto;
}
.outer td
{
    vertical-align: top;
}
.column
{
    border: none;
}
#rightColumn table, #leftColumn table
{
    width: 100%;
}
.cell
{
    border-collapse: collapse;
    border: 2px solid black;
    margin: 5px;
    overflow: hidden;
}
.cell td
{
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
    vertical-align: middle;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 10pt;
}
.cell .image
{
    padding: 0;
    margin: 0;
    height: 20px;
    width: 65px;
}

And here is a screenshot of how it displays in IE8 in standards compliance mode:

Notice that in the 3rd and 4th tables in the right hand column that the right most image field has an arbitrary width (showing white space on either side of the image) despite the fact that these cells are both class="image" and should have a fixed width of 65px. The DOCTYPE declaration is the first line of the rendered HTML and I have checked in developer tools that the mode of IE8 is standards compliant.

I would really like to fix these two table cells. Any advice is appreciated.

Regards.

EDIT: Here is the HTML for the affected tables:

<table class="cell" id="t5">
    <tr><th colspan="9"><strong><asp:Literal runat="server" ID="t5r0c0" /></strong></th></tr>
    <tr><td class="orange" colspan="4"><asp:Literal runat="server" ID="t5r1c0" /></td><td class="blue" colspan="4"><asp:Literal runat="server" ID="t5r1c4" /></td><td class="blue span2" rowspan="2"><asp:Literal runat="server" ID="t5r1c8" /></td></tr>
    <tr><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c0" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c2" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c4" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c6" /></td></tr>
    <tr><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c0" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c2" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c4" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c6" /></td><td class="image"><span id="s21" runat="server"><asp:PlaceHolder ID="p21" runat="server"></asp:PlaceHolder></span></tr>
</table>

<table class="cell" id="t6">
    <tr><th colspan="9"><strong><asp:Literal runat="server" ID="t6r0c0" /></strong></th></tr>
    <tr><td class="orange" colspan="4"><asp:Literal runat="server" ID="t6r1c0" /></td><td class="blue" colspan="4"><asp:Literal runat="server" ID="t6r1c4" /></td><td class="blue span2" rowspan="2"><asp:Literal runat="server" ID="t6r1c8" /></td></tr>
    <tr><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c0" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c2" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c4" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c6" /></tr>
    <tr><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c0" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c2" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c4" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c6" /></td><td class="image"><span id="s22" runat="server"><asp:PlaceHolder ID="p22" runat="server"></asp:PlaceHolder></span></td></tr>
</table>

EDIT: Adding style="width: 100%" to all colspan=2 elements:

The effect of doing this is different on the two affected tables. The first columns are greatly expanded while the others are greatly reduced.

Answer 1

Couple of ideas

I notice that it's intranet. You mention that the "mode" is IE8 standards - is that both browser and document? IE8 will do strange things in intranet mode.

Not sure if it's a typo, but table t5 doesn't close the last <td>

There's no chance that any spaces have crept into the markup when you're setting the contents of the image placeholder?

Answer 2

The issue may have something with the other table cells having colspan set. Try setting a width on the other cells, as answered on this question: Internet Explorer 8 table cell width bug with colspan set