linha separando 2 divs com background

Boa tarde Pessoal, vim aqui mais uma vez para sanar uma dúvida cruel, é o seguinte estou criando um layout onde preciso q as duas imagens do background se junte perfeitamente, só q no IE 6.0 ele por algum motivo q não entendo fica faltando 1 px em cima e 1px em baixo, criando assim uma linha divisoria, tou quase colocando uma tabela pra resolver isso, poxa da o maior trabalho coloca as coisas perfeitas no IE 6.0, quando esses desenvolvedores vão se adequar as regras.

<div id="total"><div id="topo"><p><img src="imagens/home_botao.gif" title="Página Inicial" alt="Página Inicial" /><img src="imagens/mapa_botao.gif" title="Mapa do site" alt="Mapa do site" /><img src="imagens/contato_botao.gif" title="Fale Conosco" alt="Fale Conosco" /></p></div><div id="banner"><div id="esquerda"><p><img src="imagens/logotipo.gif" alt="Unidade MK Brasil." /></p><p id="area_restrita"><!--aqui fica o restante da imagem em background--></p></div></div></div>
 

* {	margin: 0px;	padding: 0px;}body {	text-align: center;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #666666;	margin: 0px;	padding: 0px;}img {	margin: 0px;	padding: 0px;}#total {	width: 770px;	background-color: #FADDDD;	height: 400px;	margin-right: auto;	margin-left: auto;}#topo {	background-image: url(../imagens/topo.gif);	background-repeat: no-repeat;	background-position: center bottom;	padding-right: 30px;	text-align: right;	padding-top: 18px;	height: 20px;	background-color: #FFFFFF;}#banner {	text-align: left;}#area_restrita {	height: 60px;	width: 330px;	background-image: url(../imagens/area_restrita.gif);	background-position: left top;}#topo img {	margin-left: 20px;}[if lte IE 6]><style>.gainlayout { height: 1px; }</style><![endif]