Margin top en IE

[gVenom]

me encontre unos "hacks" para usar en css que me han servido bastante a la hora de poner estilos diferentes para IE y Firefox para que se vean iguales, consisten en poner por ejm una _ antes del estilo, y asi solo lo leerá un IE browser, pero bueno, ahora tengo un problema con una página, la direccion es:

http://godschildrenassembly.org/website-temporal/

resulta que las imagenes que estan en el centro, en la parte de abajo, si lo habren en firefox las van a ver acomodadas, pero en IE se ven como 50px mas abajo y bajo la barra del bottom. Mi css va así:

Código HTML:

.style1{/*titulos de barras*/
	font-family:"Times New Roman", Times, serif;
	color:#ffffff;
	font-weight:bold;
	font-size:12px;
	text-indent:10px;
}
.style2{ /*letra pequeña*/
	font-family:"Tahoma", Arial;
	font-size:10px;
}
ul{
	position:relative;
	top:7px;
	padding:0;
	
}

#Table_01 {
	position:relative;
	margin:0 auto;
	left:0px;
	top:0px;
	width:770px;
	_width:785px;
	height:100%;
}

#index-01 {
	position:relative;
	left:0px;
	top:0px;
	width:770px;
	height:218px;
	padding-bottom:2px;
}
#orange{
	position:relative;
	left:0px;
	padding:0px;
	background-color:#cf5503;
	width:174px;
	z-index: auto;
}
#orange-center{
	position:relative;
	background-color:#cf5503;
	width:187px;
	margin-right:8px;
	float:left;
	z-index:auto;
}
#left-1 {
	position:relative;
	left:0px;
	top:0px;
	width:174px;
	height:117px;
	z-index: auto;
}

#left-2 {
	position:relative;
	left:0px;
	top:0px;
	width:174px;
	height:187px;
}

#left-3 {
	position:relative;
	left:0px;
	top:0px;
	width:174px;
	height:158px;
}

#left-4 {
	position:relative;
	left:0px;
	top:0px;
	width:174px;
	height:136px;
}
#cent-main {
	position:relative;
	left:0px;
	_left:-15px;
	top:-117px;
	width:596px;
	height:598px;
	float:right;
	background-color:#FFFFFF;
}
#center-first{
	position:relative;
	width:595px;
	height:199px;
	
}

#pic-church{
	position:relative;
	width:101px;
	height:65px;
	margin:12px 90px 17px 4px;
	float:left;	
}	
#pic-centro{
	position:relative;
	width:101px;
	height:65px;
	margin:12px 90px 17px 4px;
	float:left;	
}
#pic-derecha{
	position:relative;
	width:101px;
	height:65px;
	margin:12px 14px 17px 4px;
	float:left;	
}
#ul-list{
	position:absolute;
	left: 120px;
	_left: 85px;
	top: 210px;
	_top: 220px;
	height: 102px;
	width:85px;
	}
#vertical-line{
	position:absolute;
	height:96px;
	width:2px;
	float:right;
	left: 191px;
	top: 220px;
}

#gradient-bar{
	position:relative;
	width:100%;
	height:23px;
	left:0px;
}
#pic-down{
	position:relative;
	width:100px;
	margin-top:25px;
	padding:0;
	top:25px;
	left: 0px;
}

#bottom {
	position:relative;
	left:0px;
	top:-120px;
	width:770px;
	height:34px;
}

lo puse todo por aquello, ok , el gradient-bar es la barra directamente arriba de esas imágenes y en posición relativa, asi que tratando de seguir el flujo de la página el pic-down, que es el que corresponde a cada imagen tiene un top y un margin-top en 25px, porque solo asi lo logre acomodar para FF. Pero no para IE y no se si es que llevo mal mi CSS.

Cualquier ayuda se agradece. Se supone que se tiene que ver así: