Allora non riesco a capire una cosa

ho una pagina grafica divisa in 4 immagini

testa
titolo
corpo
piede

ho creato un bel contenitore centrato
dentro inserisco
i vari div con immagini in background

tutti a dimensione fissa tranne il corpo che ha il bck ground ripetuto e si allunga

tutto bene su IE ma su fire fox come nel corpo inserisco un

qualcosa</p>si creano degli spazi vuoti bianchi tra il titolo ed il piede

allego il codice html ed il css

grazie per gli eventuali consigli
HTML
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenitore">
	<div id="testa"></div>
	<div id="titolo"></div>
	<div id="corpo">
	  

r</p>
	  

</p>
	</div>
	<div id="piede"></div>
</div>


rrr</p>


</p>
</body>
</html>
CSS
codice:
body{
background:#CCC;

}
p,div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
	text-align: left;
	text-indent:50px;
}
#contenitore{
	position:relative;
	top:0px;
	width: 950px;
	height: 100%;
	margin: auto;
	background: #FFF;
	}
#testa{
	
	width: 100%;
	height: 160px;
	
	background: url(img/intestazione.gif) 0 0 no-repeat;
	}
#titolo{
	
	width: 100%;
	height: 210px;
	
	background: url(img/titolo.gif) 0 0 no-repeat;
	}
#corpo{
	width: 100%;
	height: auto;
	background: url(img/corpo.gif) 0 0 repeat-y;
	}
#piede{
	width: 100%;
	height: 120px;
	
	background: url(img/piede.gif) 0 0 no-repeat;
	}