help please- lost border in a table, Firefox 3.0 Options

[katti666]

Please help I lost border in the tables right under caption. The table display correctly everywhere but in Firefox 3.0. I'm completely stuck, I tried everything but it doesn't seem to work. The code looks like:

<div class="toptable">
<table summary="Values">
<caption>Values</caption>
<tr>
<th scope="row">Values</th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th scope="col">9</th>
</tr>
<tr>
<th scope="row">Values</th>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>

</tr>

</table>
</div> <!--end toptable class-->

.. and in CSS

/*next 4 are resetting rules*/
td, th, table, caption {margin:0;
padding:0;}

table {border-collapse:collapse;
border-spacing:0;
border:0;

}

td {border:0;}

th { border:0;
text-align:left;
font-weight:400;}

/*rules for tables*/
caption {
text-align:left;
font-size:0.875;
background-color:#f6f6f6;
font-weight:700;
border:1px solid #cccccc;
border-width:1px 1px 0px 1px;
padding:0.5em 1em;
}



/*next are styles for the table*/
td, th {
font-size:0.875em;
border:1px solid #cccccc;
padding:0.5em 1em;
text-align:center; display:table-cell;
}


th {
background-color:#f6f6f6;
}

.toptable {margin-bottom:1em;
}

[katti666]

Ok what I found till now is that if I remove the background-color, the border appears. Is there any way to keep the background?...

[katti666]

Ok just in case somebody will find yourself in the similar situation - the way the code above needs to be amended is to precise the border separately for each side of the table, including borders in the td, th tags (so the bottom border of the caption will not get repeated and too thick in the result). I reckon this problem affects only Firefox 3.0, although I'm not sure. Ps. Finding answer myself is actually quite rewarding...