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í: