CSS Button not displaying properly in FF and IE

[eclipsme]

Here is part 2 of trying to create a button with text that is easily
modifiable. The link is:

http://www.eclipsme.com/rockledge/city_council.html

I have created an image for the button - button.gif. It is 76px x 20px
with rounded corners and a transparent background.

I have created a table, well actually 2 tables at this point, in which I
set the background of a cell to button.gif with CSS, as well as a few
other options.

The upper table merges 2 adjacent cells, which allows the buttons to
overlap horizontally - it is perhaps easier to look at the page than for
me to explain it, I think.

I set the cell text to center and type the label for the button.

I am getting different results in IE and FF.

IE: The top table is trying to center the text on the left of the 2
merged cells, though the button.gif appears correct. The bottom table
displays as it should, except the gif appears to be slightly cut off top
and bottom.

FF: Both sets of buttons look good except that the vertical spacing of
the buttons is way off, as if there is an extra row between each cell.

Any ideas?

Thanks,
Harvey