Divs Horizontales en IExplorer... la misma historia de siempre.. Firefox Vs IE

[delakroketa]

Hola!
Les cuento mi inconveniente, quizas puedan ayudarme.

Estoy maquetando una pagina, y sucede el mismo problema de siempre... en FIREFOX se ve hermosa, y en Internet Explorerrrrr surgen inconvenientes.

La cuestion es esta:
Tengo un Pie de pagina armado con un gran rectangulo DIV, ancho y alto fijo. Dentro de este desparramados puse otros DIVS, unos cubos... como para armar un menu.
La cuestion es que en Firefox, no tengo problema, pero en IE hace algo raro, por empezar me estira la pagina.... y la estira porque noto, que si selecciono todos los elementos de la pagina una vez publicada..... los cubos estos que arme dentro del PIE se "duplican"....

Veanlo uds:

Codigo CSS:

Código:

#Pie{
	position:relative;
	z-index:3;
	width:1024px;
	height:257px;
	background-image:url(img/pie.jpg);
	background-repeat:no-repeat;
}
#Pie-menu{
	position:relative;
	z-index:4;
	width:125px;
	height:125px;
	top:65px;
	left:25px;
	background-color:#09D80E;
}
#Pie-menu2{
	position:relative;
	z-index:4;
	width:125px;
	height:125px;
	top:-100px;
	left:175px;
	background-color:#E50083;
}
#Pie-menu3{
	position:relative;
	z-index:4;
	width:125px;
	height:125px;
	top:-185px;
	left:340px;
	background-color:#09D80E;
}
#Pie-menu4{
	position:relative;
	z-index:4;
	width:125px;
	height:125px;
	top:-350px;
	left:485px;
	background-color:#E50083;
}
#Pie-menu-txta {
	position:absolute;
	bottom:2px;
	right:2px;
	font-size:27px;
	text-align:right;
	color:#FFFFFF;
	font-family:"B";
	font-weight:bold;
	height: 122px;
	display:block;
	width: 121px;
	text-decoration:none;
	}
#Pie-menu-txtb {
	position:absolute;
	top:1px;
	right:2px;
	font-size:28px;
	text-align:right;
	color:#FFFFFF;
	font-family:"";
	font-weight:bold;
	width: 121px;
	height: 125px;
	display:block;
	text-decoration:none;
	}
#Pie-texto{
	position:relative;
	z-index:4;
	width:335px;
	height:150px;
	top:-445px;
	left:660px;
	background-color:#FFFFFF;
}
#Pie-texto-txta{
	position:absolute;
	top:10px;
	right:4px;
	font-size:37px;
	text-align:right;
	color:#E50083;
	font-family:"";
}
#Pie-texto-txtb{
	position:absolute;
	top:55px;
	right:3px;
	font-size:19px;
	text-align:right;
	color:#E50083;
	font-family:"B";
	width: 325px;
}

Codigo HTML:

Código:

<div id="Pie">
<div id="Pie-menu"><a href="/servicios.html"><div id="Pie-menu-txta"><br />
  >><br />
  servicios</div></a>
</div>
<div id="Pie-menu2"><a href="http://www.flikr.com"><div id="Pie-menu-txtb">>><br />
  mi Flikr</div></a>
</div>
<div id="Pie-menu3"><a href="/contacto.html"><div id="Pie-menu-txta"><br />
  >><br />
  contacto</div></a>
</div>
<div id="Pie-menu4"><div id="Pie-menu-txtb">>><br />
  +DG</div>
</div>

<div id="Pie-texto"><div id="Pie-texto-txta">web porfolio</div><div id="Pie-texto-txtb">
  <p>>&gt; (ctrl+N) Espacio de diseño grafico<br />
  &gt;&gt; comunicacion visual y virtual</p>
</div>
</div>

La solucion, para mi debe estar, en cambiar la forma en que puse esos cubos... sucede que mientras los hacia... el 1ero lo alineaba normal con Top y Left... al siguente ya le tenia que dar atributos con valores negativos, ej Top: -100... y al segundo Top: -250... y asi...


Si quieren verlo ONLINE, para hacer esto de COPIAR.... hagan esto.... vallan al fondo de la pagina y seleccionen con el mouse... van a ver lo que les digo de los DIVS "duplicados"....

Agradeceria una ayuda!
Saludos!