Question

I am having troubles with a table that is displaying differently on IE8 vs IE7 vs Firefox. My CSS looks like this:

table.matrix_nested
{
     border-collapse:collapse;
}
table.matrix_nested th 
{
     border-color:White;
     background-color:white;
     text-align:center;
     vertical-align:middle;
     color:Gray;
     padding:10px;
}
table.matrix_nested td 
{
     border-width:1px;
     border-style:inset;
     border-color:gray;
     padding:10px;
     width:40px;
     height:40px;
     text-align:center;
     vertical-align:middle;
}

I want evenly sized cells at 40px by 40px. IE8 is displaying this correctly but IE7 and Firefox have smaller heights.

Any thoughts?

---

I should have provided a bit more information to my original post. It seems the problem might not be with cell height, but padding. An example table would look like this:

    <table class="matrix_nested">
    <tr>
    <th>5</th>
    <td style='background-color: Yellow;' id='mp_21'>
    <span class="cell_hidden">21</span>
    </td>
    <td style='background-color: Red;' id='mp_22'>
    <span class="cell_hidden">22</span>
    </td>
    <td style='background-color: Red;' id='mp_23'>
    <span class="cell_hidden">23</span>
    </td>
    <td style='background-color: Red;' id='mp_24'>
    <span class="cell_hidden">24</span>
    </td>
    <td style='background-color: Red;' id='mp_25'>
    <span class="cell_hidden">25</span>
    </td>
    </tr><tr>
    <th>4</th>
    <td style='background-color: Green;' id='mp_16'>
    <span class="cell_hidden">16</span>
    </td>
    <td style='background-color: Yellow;' id='mp_17'>
    <span class="cell_hidden">17</span>
    </td>
    <td style='background-color: Yellow;' id='mp_18'>
    <span class="cell_hidden">18</span>
    </td>
    <td style='background-color: Red;' id='mp_19'>
    <span class="cell_hidden">19</span>
    </td>
    <td style='background-color: Red;' id='mp_20'>
    <span class="cell_hidden">20</span>
    </td>
    </tr><tr>
    <th>3</th>
    <td style='background-color: Green;' id='mp_11'>
    <span class="cell_hidden">11</span>
    </td>
    <td style='background-color: Yellow;' id='mp_12'>
    <span class="cell_hidden">12</span>
    </td>
    <td style='background-color: Yellow;' id='mp_13'>
    <span class="cell_hidden">13</span>
    </td>
    <td style='background-color: Red;' id='mp_14'>
    <span class="cell_hidden">14</span>
    </td>
    <td style='background-color: Red;' id='mp_15'>
    <span class="cell_hidden">15</span>
    </td>
    </tr><tr>
    <th>2</th>
    <td style='background-color: Green;' id='mp_6'>
    <span class="cell_hidden">6</span>
    </td>
    <td style='background-color: Green;' id='mp_7'>
    <span class="cell_hidden">7</span>
    </td>
    <td style='background-color: Green;' id='mp_8'>
    <span class="cell_hidden">8</span>
    </td>
    <td style='background-color: Yellow;' id='mp_9'>
    <span class="cell_hidden">9</span>
    </td>
    <td style='background-color: Red;' id='mp_10'>
    <span class="cell_hidden">10</span>
    </td>
    </tr><tr>
    <th>1</th>
    <td style='background-color: Green;' id='mp_1'>
    <span class="cell_hidden">1</span>
    </td>
    <td style='background-color: Green;' id='mp_2'>
    <span class="cell_hidden">2</span>
    </td>
    <td style='background-color: Green;' id='mp_3'>
    <span class="cell_hidden">3</span>
    </td>
    <td style='background-color: Green;' id='mp_4'>
    <span class="cell_hidden">4</span>
    </td>
    <td style='background-color: Yellow;' id='mp_5'>
    <span class="cell_hidden">5</span>
    </td>
    </tr><tr>
    </tr>
    <tr>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    </tr>
</table>    

I noticed that if I reduce the padding on TD to be 5px, the cells line up more evenly. So it seems Firefox/IE7 are handling the padding differently than IE8?

Answer 1

After playing around with this a bit more, I found that the problem was actually due to the padding. Each of the cells of the matrix has values inside, but hidden (using CSS display: none). I added padding in the cells. It seems IE8 treats the padding as if the values are not there, since hidden. But IE7 and FF takes it as if the value is there.