IE8 Not Rendering Properly In IE8 Standards Compliant Mode
===

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:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/s81Gp.png

Notice that in the 3rd and 4th tables in the right hand column that the left most image field has an arbitrary width 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.
