Problemas con Margin

[jpeeri]

Hola buenos dias. Verán tengo los siguientes scripts:

Código HTML:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr height="130">
    <td width="100%" class="logo" colspan="2">
    <img src="themes/Default/images/logo.gif" alt="logo.gif" />
    </td>
  </tr>
  <tr>
    <td width="20%" class="menu">
    <ul>
      <li>
        Inicio
      </li>
    </ul>
    </td>
    <td width="80%" class="content">
    Hola buenos dias <a href="jose.gif">Jose</a>
    </td>
  </tr>
</table> 

y este es el CSS:

Código:

/* ETIQUETAS */
IMG {
	border:0px;
}
BODY {
 	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
FONT {
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: black
}
TABLE {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: black
}
H1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px
}
H2 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 14px
}
H3 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 13px
}
H4 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}
H5 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}
H6 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}
H7 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}
H8 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}

A:link 	    { color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
A:active 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
A:visited 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
A:hover 	{ color:green; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:overline}

/* ESTILOS DEFINIDOS */
.logo {
	background-color: #153510;
	text-align: right;
}
.menu {
	background-color: #45b335;
	color: #FFF;
	vertical-align: top;
	margin: 10px 10px 10px 10px;
}
menu.A:link 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
menu.A:active 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
menu.A:visited 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
menu.A:hover 	{ color:green; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:overline}
.content {
	background-color: #D6FFC1;
	vertical-align: top;
	margin: 10px 10px 10px 10px
}

Pueden ver el resultado aquí: http://jpeeri.myftp.org/scripts/cjProjects/

El problema como habréis podido averiguar algunos. Es que los margenes que le digo a las dos celdas de debajo no me hacen ni caso. Intento que sean de 10 px entre cada extremo pero nada.

¿Alguna idea? Muchisimas gracias