Need a little help

[mrsbuzzy]

I'm modifying my website forums.

my community is http://www.parent-2-parent.com/forum
you can log in under testing with the password of testing.

When logged in you'll only see 2 boards: Towne Centre (the way all our boards currently look) and the "Testing Style" board which is in the early stages of modifications.

I'm having problems with the coding.

If you look at the 'buttons' at the top for 'boards', 'donate', 'shopping' etc... you'll see space between them as well as space below them.

I don't know why.

In my control panel under user CSS I have these settings:
Main Table Width 100%
Spacer Size 0
Outer Border Width 0
Inner Border Width 1
Table Cell Padding 2 (I tried 0 and it didn't help this problem)
Forum Element Spacer Size 0
etc..

Here's the coding I used for the Table I have the buttons and the bar below the buttons:

<table width="100%">
<tr><td>
<img src="http://www.parent-2-parent.com/image...ons/boards.jpg">
<img src="http://www.parent-2-parent.com/image...ons/donate.jpg">
<img src="http://www.parent-2-parent.com/image...s/shopping.jpg">
<img src="http://www.parent-2-parent.com/image...wristbands.jpg">
<img src="http://www.parent-2-parent.com/image...newsletter.jpg">
</td></tr>
<tr bgcolor="#F30089"><td align="center" valign="center" cellpadding="2">
<font color="#FFFFFF" size=2 align="center"><B><center>Help support Parent-2-Parent, ~ <i>Parents Supporting Parents</i></center></b></font></td>
</tr>
</table>

I want the buttons to touch and I want the buttons to sit ON the pink bar...

Anyone have any idea what I'm doing wrong?