Foros del Web - Tabla choesionada también en Firefox

Buenas,

por primera vez estoy tratando de crear una página web basada prácticamente en su totalidad en CSS. Por el momento solo tengo una gran dificultad: hacer que esté 'cohesionada' una tabla basada en CSS tanto en firefox como en IE 7. En el IE 7 se ve genial pero en el Firefox 2 la parte de abajo de la 'tabla' está separada cosa así como de un renglón.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<head>

<title>Tabla en CSS.</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
 

div.top {

        height:12px; 

        background-color: #FFFF99;

        margin-left:0; margin-right:0; margin-top:2em; margin-bottom:0}

        

img.esquina_sup_izq { float:left; }

img.esquina_sup_der { float:right; }
 

div.content { 

        background-color: #ffffcc;

        margin:0 }

        

div.boxcontrol { 

         background-color: #ffffcc;

         padding-left:5%; padding-right:5%; padding-top:0; padding-bottom:0; margin:0 }

        

div.bottom { height:18px; 

        background-color: #FFFF99;

        border:0px none;

        padding:0;

        margin:0}

        

img.esquina_inf_izq { float:left; }

img.esquina_inf_der { float:right; }
 

</style>
 

</head>

<body bgcolor="#008000">
 

        <div id="top" class="top">

                <img src="imagenes/ttop_izq.jpg" class="esquina_sup_izq" width="16" height="11" />

                <img src="imagenes/ttop_der.jpg" class="esquina_sup_der" width="18" height="11" />

        <font size="1">Arriba</font></div>

        <div id="content" class="content">

                <div id="box_control" class="boxcontrol">

                Blablabla<p>blblabla</p>

        <p>blabla</p>

        <p>blalba y justamente aquí debajo y entre la parte baja se genera un 

        espacio en el Firefox.</div>

        </div>

        <div id="bottom" class="bottom">

                <img src="imagenes/tbtm_izq.jpg"  class="esquina_inf_izq" width="16" height="16" />

                <img src="imagenes/tbtm_der.jpg" class="esquina_inf_der" width="16" height="16" />

        <font size="1">Parte baja</font></div>

        

</body>

</html>

El código CSS de la tabla lo extraje de una serie de manuales/guías precisamente para esto y luego cambié las imagenes de la tabla, aunque para facilitarlo, al publicarlo aquí, en el CSS he quitado las imagenes de fondo de la tabla y los he sustituido por backgruound-color.

El problema es tan tonto como q no se ve bien en Firefox por lo que decía,

¿Me podeis hechar un cable :-) ?

Saludos y gracias

PD: en el código CSS he tenido que quitar en parte lo de

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " www w3 org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" www w3 org /1999/xhtml">

ya que me lo detectaba como SPAM al tener pocos mensajes.