FF vs IE interpreting table and td styles

IE renders this table just fine; FF not

[jrivesj]

Below is the code from my style sheet (only that pertaining to the table), followed by the HTML for the particular table on my site. IE renders the table perfectly with a nice double border, shades of logher and darker gray differentiating the columns and single borders separating the table cells. FF is totally ignoring all formatting, just has the info in cells, no borders, no background - nothing.

Your help will be greatly appreciated!

The CSS:

*************

table.2 {
float: right;
border: double 4pt #006;
background: #d0d0d0;
width: 45%;
color: #006;
border-collapse: collapse;
border-spacing: 5pt;
margin-left: 10px;
}

td.4a {
border: #006 2pt solid;
padding: 1.0 pt;
font: .8em verdana, arial, sans-serif;
color: #006;
text-align: center;
}

td.4b {
border: #006 2pt solid;
padding: 1pt;
font: .7em verdana, arial, sans-serif;
width: 8%;
color: #006;
background: #d5d5d5;
text-align: center;
}

td.1 {
border: #006 2pt solid;
padding: 1.0 pt;
font: .55em verdana, arial, sans-serif;
width: 8%;
color: #006;
text-align: center;
}

td.1b {
border: #006 2pt solid;
padding: 1.0 pt;
font: .55em verdana, arial, sans-serif;
width: 8%;
line-height: 1.0 em;
color: #006;
text-align: center;
background: #d5d5d5;
}

*************

The HTML:

*************

<table class="2">
<tr>
<td colspan="6" class="4a">
The following abbreviations and symbols are used by the DIA in its meeting schedules:

</td>
</tr>
<tr>
<td class="4">
Abbrev.</td>
<td class="4b">
Description</td>
<td class="4">
Abbrev.</td>
<td class="4b">
Description</td>
<td class="4">
Abbrev.</td>
<td class="4b">
Description</td>
</tr>
<tr>
<td class="1">O</td>
<td class="1b">Open meeting; anyone may attend</td>
<td class="1">
C</td>
<td class="1b">
Closed meeting; for alcoholics only</td>
<td class="1">
Dis</td>
<td class="1b">
Discussion meeting</td>

</tr>

<tr>
<td class="1">
Spk</td>
<td class="1b">
Speaker meeting</td>
<td class="1">
BB</td>
<td class="1b">
<em>Big Book</em> study</td>

<td class="1">
SSt</td>
<td class="1b">
Study of the Twelve Steps</td>
</tr>

<tr>

<td class="1">
SSpk</td>
<td class="1b">
Step Speaker</td>
<td class="1">
W</td>
<td class="1b">
Women only</td>
<td class="1">
M</td>
<td class="1b">
Men only</td>

</tr>

<tr>
<td class="1">
Trad</td>
<td class="1b">
Study of the Twelve Traditions</td>

<td class="1">
Lit</td>
<td class="1b">
AA literature study</td>
<td class="1">
12 & 12</td>
<td class="1b">
<em>Twelve Steps and Twelve Traditions</em> study</td>

</tr>

<tr>
<td class="1">
Cdl</td>
<td class="1b">
Candlelight meeting</td>
<td class="1">
YP</td>
<td class="1b">
Young people</td>

<td class="1">
NC</td>
<td class="1b">
Newcomer meeting</td>
</tr>

<tr>

<td class="1">
10/12</td>
<td class="1b">
Steps 10, 11 & 12 meeting</td>

<td class="1">
LS</td>
<td class="1b">
<em>Living Sober</em> study</td>

<td class="1">
Con</td>
<td class="1b">
Study of the Twelve Concepts for World Service

</tr>

<tr>

<td class="1">
LH</td>
<td class="1b">
<em>Language of the Heart</em> meeting</td>
<td class="1">
Span</td>
<td class="1b">
Spanish Language meeting</td>
<td class="1">
CU</td>
<td class="1b">
Call-up meeting</td>
</tr>

<tr>

<td class="1">
FA</td>
<td class="1b">
Family Afterward meeting</td>
<td class="1">
Step/Trad</td>
<td class="1b">
Step and Tradition meeting</td>

<td class="1">
<img src="ns.gif" border="0" alt="Non-smoking"></td>
<td class="1b">
Non-smoking
</td>

</tr>

<tr>
<td class="1">
<img src="camera3.gif" border="0" alt="Photo of Facility"><br>
</td>
<td class="1b">
Click to view photo of the meeting facility
</td>

<td class="1">
<img src="hc.gif" border="0" alt="Wheelchair Access"><br>
</td>
<td class="1b">
Wheelchair Access</td>

</td>
<td class="1">
&nbsp;</td>
<td class="1b">
&nbsp;
</td>

</tr>

</table>

[drhowarddrfine]

You cannot give a class or id name beginning with a number. This may cause some browsers to ignore it.

[encyclo]

Yes, you can't use a number at the beginning of a class or id - IE permits it, but Firefox follows the standard more closely and ignores the styles.

You can pick up a lot of errors like this by using both the HTML validator [validator.w3.org] and CSS validator [jigsaw.w3.org] to check your pages.

[jrivesj]

Thanks - I've since heard that the number would have been OK in CSS 1 but not in CSS 2. I suppose someone like me shouldn't question the wisdom of the W3C gurus, but I can't help but wonder what the reason beind that rule was...never mind, I do appreciate the help.

Jim

[tedster]

I see conflicting information about CSS1 -- even on the W3C website:

in CSS1, selectors (element names, classes and IDs) can contain
only the characters A-Z, 0-9, and Unicode characters 161-255, plus
dash (-); they cannot start with a dash or a digit; they can also contain
escaped characters and any Unicode character as a numeric code
(see next item).

[w3.org...]

In CSS1, a class name could start with a digit (".55ft"), unless it
was a dimension (".55in"). In CSS2, such classes are parsed as
unknown dimensions (to allow for future additions of new units).
To make ".55ft" a valid class, CSS2 requires the first digit to be
escaped (".\35 5ft")

[w3.org...]

At any rate, that second quote clarifies the reasoning a bit -- making "room" in the spec for new units of measure.

[jrivesj]

Thanks, Tedster - this is a friendly and helpful place, and I'm really glad I found you guys.

Jim