Ho 'prodotto' questo codice facendo il solito sbaglio di provarlo solo con IE

Su IE si vede il riquadro grafico e il testo al suo interno.

Su firefox si vede il riquadro grafico rimpicciolito nei suoi minimi termini, ed il testo gli finisce sopra overflowando.

codice:
<html>
<head>
<style>
#quadrato{height:auto;width:279px;border:0px solid blue;padding-left:0px;overflow:hidden;margin:10px}
#top{width:279px;height:29px;background:#fff url('top.gif') no-repeat;}
#center{width:279px;height:29px;background:#fff url('mid.gif') repeat-y;padding-left:20px;}
#bottom{width:279px;height:29px;background:#fff url('bot.gif') no-repeat;}
</style>
</head>
<body>
	<div id="quadrato">
		<div id="top"></div>
		<div id="center">asdsad

parola lungaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa a capo

asdsada



asdsada



asdsada



asdsada

</div>
		<div id="bottom"></div>
	</div>
</body>
</html>
Le immagini sono delle banali cornicette che si agganciano...
Niente di speciale.

Vorrei fare un riquadro grafico senza usare le tabelle vecchio stile... ma ho sempre problemi di compatibilita' coi css.