Unable To Apply CSS To Table Cell - html

Question

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.

Answer 1

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

Answer 2

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.