This is reasonable easy to sort out and is one of the many problems that users have with IE/Firefox.
First off, a class is set of rules (css rules) that can be applied to many areas. An ID can only ever be applied once (or at least, it should only ever be applied once. Now I may be wrong on this, but thats how I have always played it when designing CSS). Also you are using "inline" CSS rather then sheet CSS which can lead to confusions (just my opinion there though)
As Owatagal says, in Firefox, the borders are black, in IE, they are the same color.
This happens, because rightly so, in this line of code:
><td width="50%" bgcolor="#FF0000" style="border-style: solid; border-width: 3px; padding-left: 4px; padding-right: 4px" bordercolor="#FF0000" valign="top">
<i><b><font face="Arial" size="4" color="#FFFFFF">
you have not defined the border color of the cell. IE being M$ product and not following proper rules, defines it from the style you have originated. Firefox displays it correctley as the border is not colored (although is 3 px big) and hence is black.
You could follow Owatagals suggestion but I would also do it like this.
Put in your head the following, (this is a class)
border: 3px solid #f00;
and then for your html all you need to put is:
As you can see it leaves the main coding much cleaner and the best bit is, you can use it again on the next columns header. In the style area, you can even define fonts.
Keep it up, its brillaint that you are learning this and I am very impressed!
With regards to the missing semicolon, you should always put it in. In the above style sheet example, if you forget the semi colon, it won't work at all, hence I always put it in.