Firefox ignoring my table CSS

[mccollin]

I have a CSS problem that I'm baffled with. I've stripped nearly everything functional out of this test page to get it down to the bare essentials. The CSS for the table is as such...



table.spectab {
width:100%;
border-collapse:collapse;
border-style:none; }
table.spectab tr td,th {
margin:0; padding:5px 7px 5px 0;
border-bottom:1px solid #bfbfbf; }
table.spectab tr th {
font-weight:bold; }
table.spectab tr.noline td {
border-bottom:none; }


The html is as follows...


<table class="spectab" border="0" width="100%" cellpadding="10" cellspacing="2">

<tr>
<td width="40%">test</td>
<td width="60%">a</td>
</tr>
<tr valign="top">
<td width="40%">test</td>
<td width="60%">b</td>
</tr>
<tr valign="top">
<td width="40%">test</td>
<td width="60%">c</td>
</tr>

</table>



The resulting page is at http://pdaphonehome.com/?page=tabletest

In IE7 the table looks as it should... in FF the table loses its formatting. Anyone know what's wrong here?

[peterska2]

Thats because IE is displaying it incorrectly ;)

Change your CSS to

table.spectab {
width:100%;
border-collapse:collapse;
border-style:none; }
td.spectab {
margin:0; padding:5px 7px 5px 0;
border-bottom:1px solid #bfbfbf; }
tr.spectab, th.spectab {
font-weight:bold;
margin:0; padding:5px 7px 5px 0;
border-bottom:1px solid #bfbfbf; }
table.spectab tr.noline, td {
border-bottom:none; }

and your table code to

<table class="spectab" border="0" width="100%" cellpadding="10" cellspacing="2">

<tr class="spectab">
<td width="40%" class="spectab">test</td>
<td width="60%" class="spectab">a</td>
</tr>
<tr valign="top" class="spectab">
<td class="spectab" width="40%">test</td>
<td class="spectab" width="60%">b</td>
</tr>
<tr valign="top" class="spectab">
<td class="spectab" width="40%">test</td>
<td class="spectab" width="60%">c</td>
</tr>

</table>


This displays perfectly on my localhost in FF2 and IE