Problema con Overlapping y PNG's

Hoy empeze a reconstruir un poco el diseño de mi web, cambiando de logotipo, y unos colores, el cambio mas importante lo estoy realizando en el header pero tuve unos problemas:

El header consiste en dos imagenes, el logotipo, sombras y efectos, que van en un png transparente, y otra imagen debajo de esta que va a cambiar en cada seccion...

...seria muy facil hacer 5 imagenes, una para cada seccion con todo y logo pero con las ganas de aprender decidi hacerlo de esta manera.

Para hacerlo lei el webtip sobre overlapping de Clab y lo implemente de esta manera:

En el XHTML:

Código :

<div id="capa_logo"><img src="images/logo.png"alt="" width="780" height="290"/></div>
<div id="fondohome"><img src="images/homefondo.jpg" alt="" /></div>

Y en el CSS de la siguiente manera:

Código :

#capa_logo{
 left:100px;
position:absolute;
z-index:1;
}
#fondohome{
 left:100px;
position:absolute;
z-index:0;
}

Todo funciono muy bien tenia el #fondohome debajo de el #capa_logo pero al verlo en IE me tope con el problema de que no carga transparencias en png, entonces busque en clab y aplique varios codigos pero ninguno me funciona por el z-index creo yo... ya que los probe sin el overlapping y si funcionan.

quisiera saber si alguien tiene un codigo o una explicacion se los agradeceria

gracias a los que vieron el post y trataron de ayudarme... ya encontre la solucion...

posteala, así otros que tengan un problema similar podrán resolver su problema

Al no encontrar respuestas en varios foros y tutoriales, me puse a analizar sitios con estos efectos (alrededor de unos 20), hasta que llegue al que visito diario y por psicologia inversa lo habia olvidado: CRISTALAB , analize el header y el css y di a la conclusion de como aplicar mi efecto. Lo que hise en el header fue hacer un div que contenga todo otro div para el fondo y adentro de el el de el logo.

He aqui la parte del XHTML

Código :

<div id="header">
   <div id="fondo_home">
      <div id="capa_logo">
         <img src="images/logo.png" alt="Logotipo" width="780" height="290" title="Logotipo" />
      </div>
   </div>
</div>

Y en el CSS añadi un fondo a el div #fondo_home y demas propiedades:

Código :

#header {
   margin: 0px auto;
   width:780px;
   height:290px;
}
#fondo_home {
background:url(../images/header/fondo_home.jpg) no-repeat;
   background-position:center;
   margin: 0px auto;
   margin-top:0px;
   width:780px;
   height:290px;
}

#capa_logo {
   margin: 0;
   padding: 0;
   width: 290px;
   height: 290px;
   position:relative;
}

Y para IE añadi un IF con el metodo ya tratado por medionuevo, ahora solo me falta sustituir el #fondo_home por el #fondo_(otraseccion) en las otras 5 secciones y añadir a el estilo css las propiedades especificas para que asi cambie el fondo en cada seccion...


5 horas productivas de mi vida desperdiciadas en hacer eso... pero como lo dije antes:

Freaze escribió:

aparte de que carga mas rapido.

He aqui el tip Fael para algun usuario con las mismas dudas.