Bdtjtk

I have table cells with class=image to which I cannot seem to apply any CSS. Here is my markup (nested tables) where the first table shows an example of a typical row:

<table class="outer">

        <tr>

            <td>

                <table class="column" id="leftColumn">

                    <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">

                    <tr>

                        <td>

                            <table class="cell" id="t3">

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <table class="cell" id="t4">

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <table class="cell" id="t5">

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <table class="cell" id="t6">

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <table class="cell" id="t7">

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <table class="cell" id="t8">

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <table class="messages" id="t9">

                            </table>

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

    </table>

Here is my 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;

}

.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: 11pt;

}

.cell .image

{

    padding: 0;

    margin: 0;

    height: 2px;

    width: 7px;

}

.messages td

{

    border-collapse: collapse;

    border: 2px solid #FF0000;

    text-align: left;

}

h1

{

    text-align: center;

    font-size: 150%;

}

h2

{

    text-align: center;

}

th

{

    height: 24px;

    background-color: #2B60DE;

    color: #FFFFFF;

}

.gray

{

    background-color: #AAAAAA;

}

Nothing I do to .cell .image seems to be able to shrink the images below a certain size -- which is already much smaller than the actual images so I know some shrinking is already going on.

Any advice is appreciated.

Could be the line-height or font-size preventing the td to become smaller.

Try setting the tds of the row with the image to line-height: 0px and font-size: 0px

I put together a jsfiddle of your example at http://jsfiddle.net/9xLqY/. The styles are being applied just fine when I remove the ASP components:

<span id="s1" runat="server">

    <asp:PlaceHolder ID="p1" runat="server"></asp:PlaceHolder>

</span>

So it must be one of these components that is forcing the cells to be larger than you want. You'll need to add styles for #s1 and #p1.