PNG transparencia en IE

Hola. Estoy haciendo un menu con que tiene imagenes de fondo en css, pero no logro tener el mismo efecto cuando corrigo el problema de los PNG para IE. Este es el codigo original, que lo soporta Firefox, Opera e IE 7:

HTML

<div class="boton" id="btn_quienes"><a href="somos.php"><strong>Quienes Somos</strong></a></strong></div>
<div class="boton" id="btn_servicios"><a href="servicios.php"><strong>Servicios</strong></a></strong></div>
<div class="boton" id="btn_cotizador"><a href="cotizador.php"><strong>Cotizador</strong></a></strong></div>
<div class="boton" id="btn_tracking"><a href="tracking.php"><strong>Tracking</strong></a></strong></div>
Como veran, cada DIV es un boton con un identificador unico, ademas se le asigna una class "boton" para las caracteristicas comunes

EL CSS

.boton {
float: left;
font-size: 16px;
font-weight: normal;
text-align: center;
color: #fff;
}
#btn_quienes a {
width:127px;
color: #fff;
background: url(gfx/botonera/quienessomos.png) no-repeat top;
padding-bottom: 103px;
float: left;
}

#btn_quienes a:hover {
background: url(gfx/botonera/quienessomos.png) no-repeat bottom;
}
/* se hace lo mismo por cada boton */
Lo que hago en el css es asignar un fondo al vinculo (a) de cada div, con la proiedad:

background: url(gfx/botonera/quienessomos.png) no-repeat top;

y cuando el mouse se posiciona en el vinculo, muestra de fondo la misma imagen, pero empezando desde abajo (bottom)

background: url(gfx/botonera/quienessomos.png) no-repeat bottom;
Ademas de otras propiedas como el ancho del vinculo

Como veran la imagen es png, y solo se ve correctamente la transparencia en FF y IE 7, pero no en versiones anteriores de IE. Para ello existe un forma especial de llamar a la propiedad que es la siuiente:
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png' no repeat top);

La parte inferior de la imagen png es igual a la superior, a diferecia que tiene una sombra alrededor, que da el efecto de relieve cuando se pasa el mouse encima. La otra propiedad que hace posible este efecto es:

padding-bottom: 103px;

Ya que entonces siempre se muestra 103px nada mas de la imagen, es decir cuando es top, los primero 103 px y cuando es bottom (mouseover) los ultimos 103 px.

Espero que se haya entnedido, para los que usan css ya habran utlilzado alguna vez este truquito.

Bien, pero necesito que sea 100 % compatible con todas versiones de IE, al menos las mas viejas que 7.0 y por ello tengo que utlizar lo sigueinte en el lugar de background:

/* background: url(gfx/botonera/quienessomos.png) no-repeat top; */
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png' no repeat top);

Y es ahi donde se me complica tooodoooo sm023.gif

Si bien se logro el efecto de transparecia de esta manera, ocurren otras cosas extranas:

1) No respeta el ancho del vinculo (a) 127 px, se ajusta al ancho de la imagen, cortando el texto del vinculo
2) Muestra todo la imagen, y no respeta el limite de los 103px

Ya no se que hacer, alguien me podria decir cual seria la mejor manera de soluciona? Muchas gracias! espero sus respuestas.

PD: incluyo un vinculo con el menu, asi como debe ser: <a href="http://www.rolitrans.com.py/prueba.html" target="_blank">http://www.rolitrans.com.py/prueba.html</a>
para entender mejor el efecto.

 

No entendí bien tu problema, vi tu página en el ie6 y el png no los está tomando transparentes.

Cuando se usa ese método que usas, debes grabar como png 32. Al menos a mi sólo me funciona así para el ie6 usando lo de filter, para que me tome la transparencia.

Mira esta página, te explican bien como usarlo:
<a href="http://www.csslab.cl/2006/08/14/pngs-transparentes-en-ie6/" target="_blank">http://www.csslab.cl/2006/08/14/pngs-transparentes-en-ie6/</a>

 

Gracias por la respuesta. Lastimosamente no se soluciona, el filter en realidad funcionan en IE6, pero el problema radica en que aparenteme no funciona cuando se le asigan como fondo a un vinculo (a), tal cual es este caso

Me pregunto se soporta realmente y yo estoy cometiendo algun error o habra otra forma de hacerlo?

Agradezco cualquier ayuda, gracias!

 

Yo lo he usado como background para links y me ha funcionado perfectamente.

Prueba de quitarle esta parte: <b>no repeat top</b>
A esta línea: filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png' no repeat top);
Que quede así: filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png');

Y fíjate de que en el css para ie6 poner la línea de <b>background:none;</b> para quitar la imagen png puesta en el css normal.

Si sigues el ejemplo que te di en el link anterior, te debe funcionar.

En el ejemplo que pusiste no estás usando lo del filtro, así que no puedo ver si haces algo mal.

 

<!--quoteo(post=326872:date=Jul 29 2008, 11:53 AM:name=adi)--><div class='quotetop'>CITA(adi @ Jul 29 2008, 11:53 AM) [snapback]326872[/snapback]</div><div class='quotemain'><!--quotec-->
Yo lo he usado como background para links y me ha funcionado perfectamente.

Prueba de quitarle esta parte: <b>no repeat top</b>
A esta línea: filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png' no repeat top);
Que quede así: filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png');

Y fíjate de que en el css para ie6 poner la línea de <b>background:none;</b> para quitar la imagen png puesta en el css normal.

Si sigues el ejemplo que te di en el link anterior, te debe funcionar.

En el ejemplo que pusiste no estás usando lo del filtro, así que no puedo ver si haces algo mal.
<!--QuoteEnd--></div><!--QuoteEEnd-->

Gracias por seguir intentando,

he seguido las indicaciones del link, y me da el mismo resultado lastimosamente, es decir, no queda como los demas botones. Lo que hice ahora fue cambiar el css del primer boton tal cual indica el manual cuyo link me enviaste. Los demas deje igual. De esta manera se puede ver la dieferencia entre los botones y el efecto que no logro.

Estare muy agradecido si puedes mirarlo y decirme que opinas. El link es el mismo, auque lo paso de nuevo:

<a href="http://www.rolitrans.com.py/prueba.html" target="_blank">http://www.rolitrans.com.py/prueba.html</a>

Gracias de nuevo!

 

Aca esta tu solución: <a href="http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html" target="_blank">http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html</a>

:adios:

 

Pruébalo así a ver si te funciona:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->#btn_quienes a {
&nbsp;&nbsp;&nbsp;&nbsp;width:127px;
&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;

&nbsp;&nbsp;&nbsp;&nbsp;height:130px;
&nbsp;&nbsp;&nbsp;&nbsp;display:block;

&nbsp;&nbsp;&nbsp;&nbsp;background: url("gfx/botonera/quienessomos.png") top no-repeat !important;
&nbsp;&nbsp;&nbsp;&nbsp;background-image: none;
&nbsp;&nbsp;&nbsp;&nbsp;filter: none !important;
&nbsp;&nbsp;&nbsp;&nbsp;filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png');
}
<!--c2--></div><!--ec2-->
Y por cierto, a la clase boton que usas, debes definirle un ancho para que te funcione correctamente el float y no tengas que ponérselo al <b>a</b>.
También tienes que cuidar tu código que no quede sucio, tienes unas etiquetas que cierran incompletas (</strong>)

 

<!--quoteo(post=326971:date=Jul 29 2008, 03:37 PM:name=DragonX)--><div class='quotetop'>CITA(DragonX @ Jul 29 2008, 03:37 PM) [snapback]326971[/snapback]</div><div class='quotemain'><!--quotec-->
Aca esta tu solución: <a href="http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html" target="_blank">http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html</a>

:adios:
<!--QuoteEnd--></div><!--QuoteEEnd-->

Hola Dragonx, gracias por la respuesta, estuve leyendo el link que me enviaste, pero segun entendi sirve solo para las imagenes que se insertan via tag <img> ya que se le asigna el behavior a dicha etiqueta.

En mi caso yo utilizo el png como fondo de un link (etiqueta a) por medio de css

background: url("gfx/botonera/quienessomos.png") top no-repeat;

si existe alguna manera que pueda asignarle el behavior al png que esta definido como fondo del link, seria la solucion! Muchas gracias!! Espero poder resolver!

<!--quoteo(post=326976:date=Jul 29 2008, 03:45 PM:name=adi)--><div class='quotetop'>CITA(adi @ Jul 29 2008, 03:45 PM) [snapback]326976[/snapback]</div><div class='quotemain'><!--quotec-->
Pruébalo así a ver si te funciona:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->#btn_quienes a {
&nbsp;&nbsp;&nbsp;&nbsp;width:127px;
&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;

&nbsp;&nbsp;&nbsp;&nbsp;height:130px;
&nbsp;&nbsp;&nbsp;&nbsp;display:block;

&nbsp;&nbsp;&nbsp;&nbsp;background: url("gfx/botonera/quienessomos.png") top no-repeat !important;
&nbsp;&nbsp;&nbsp;&nbsp;background-image: none;
&nbsp;&nbsp;&nbsp;&nbsp;filter: none !important;
&nbsp;&nbsp;&nbsp;&nbsp;filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png');
}
<!--c2--></div><!--ec2-->
Y por cierto, a la clase boton que usas, debes definirle un ancho para que te funcione correctamente el float y no tengas que ponérselo al <b>a</b>.
También tienes que cuidar tu código que no quede sucio, tienes unas etiquetas que cierran incompletas (</strong>)
<!--QuoteEnd--></div><!--QuoteEEnd-->


Hola. Se me complica mucho porque no tengo el IE5 o 6 instalado en esta pc. Pruebo en otra pc y te aviso el resultado

Muchas gracias!!

PD: Gracias por los detalles del codigo, no me di cuenta de la etiqueta </strong> demas!


Lo probe y el resultado es el mismo, hice los cambios que me sugeriste y lo actualice en el vinculo <a href="http://localhost/rolitrans.com.py/prueba.html" target="_blank">http://localhost/rolitrans.com.py/prueba.html</a>
que otra cosa podria probar, espero poder resolver! Muchas gracias!

 

<!--quoteo(post=326993:date=Jul 29 2008, 04:30 PM:name=gregorgodoy)--><div class='quotetop'>CITA(gregorgodoy @ Jul 29 2008, 04:30 PM) [snapback]326993[/snapback]</div><div class='quotemain'><!--quotec-->
Hola Dragonx, gracias por la respuesta, estuve leyendo el link que me enviaste, pero segun entendi sirve solo para las imagenes que se insertan via tag <img> ya que se le asigna el behavior a dicha etiqueta.

En mi caso yo utilizo el png como fondo de un link (etiqueta a) por medio de css

background: url("gfx/botonera/quienessomos.png") top no-repeat;

si existe alguna manera que pueda asignarle el behavior al png que esta definido como fondo del link, seria la solucion! Muchas gracias!! Espero poder resolver!

<!--QuoteEnd--></div><!--QuoteEEnd-->

 

Bien, despues de varias horas pude avanzar en algo, gracias al aporte de adi, aqui pon go el codigo css:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
#btn_quienes a {
&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;
&nbsp;&nbsp;&nbsp;&nbsp;width: 127px;
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;height:120px;
&nbsp;&nbsp;&nbsp;&nbsp;display:block;

&nbsp;&nbsp;&nbsp;&nbsp;background: url("gfx/botonera/quienessomos.png") top no-repeat !important;
&nbsp;&nbsp;&nbsp;&nbsp;background-image: none;
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;filter: none !important;
&nbsp;&nbsp;&nbsp;&nbsp;filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='gfx/botonera/quienessomos.png', sizingMethod='crop');

}
<!--c2--></div><!--ec2-->

lo que hizo funcionar es la propiedad display:block (gracias adi) y el height:120px
pero aun mas importante es en el filtro de IE poner el atributo sizingMethod='crop' para que no se salga de los limites especadors en width y height.

Aun me queda dos problemas por resolver:
1) Como asignar al filtro Top o bottom a modo que cuando este el mouse over funcine el efecto?
2) al usar el filtro la imagen de fondo no resecta la alinacion de la clase boton, que es center! Me queda a la izaquierda. SUgerencias porfa

La clase boton

.boton {
float: left;
font-size: 16px;
font-weight: normal;
text-align: center;
color: #fff;
}


De nuevo el link <a href="http://www.rolitrans.com.py/prueba.html" target="_blank">http://www.rolitrans.com.py/prueba.html</a> GRACIAS!!

PD: el problema es con IE6 o inferiores, gracias

 

Siento decirte que en IE6 no esta funcionando




... jaja ya se pues, era eso lo que justo necesitabas solucionar jaja es una broma

 

<!--quoteo(post=327147:date=Jul 30 2008, 06:28 AM:name=elQuique)--><div class='quotetop'>CITA(elQuique @ Jul 30 2008, 06:28 AM) [snapback]327147[/snapback]</div><div class='quotemain'><!--quotec-->
Siento decirte que en IE6 no esta funcionando
... jaja ya se pues, era eso lo que justo necesitabas solucionar jaja es una broma
<!--QuoteEnd--></div><!--QuoteEEnd-->

Jaajaj vamos elquique!! me extraña que esto te venza!! jaja gracias!

 

Preparando tutorial ....

Lo quieres en aleman ?

Guarani ?

o Español ?

 

<!--quoteo(post=327153:date=Jul 30 2008, 07:04 AM:name=elQuique)--><div class='quotetop'>CITA(elQuique @ Jul 30 2008, 07:04 AM) [snapback]327153[/snapback]</div><div class='quotemain'><!--quotec-->
Preparando tutorial ....

Lo quieres en aleman ?

Guarani ?

o Español ?
<!--QuoteEnd--></div><!--QuoteEEnd-->


SUPER!! jaja, en español bien hablado

Grande elquique, espero ancioso!

 

Pues yo veo bien la transparencia en IE6...

Lo que no funciona es el hover, puesto que, de la forma que lo haces, no funciona con lo del filter, pues usas la misma imagen solo que en posición distinta.

Para IE6 tendrías que hacer dos imágenes, una para normal, y otra para hover.

 

Hola Adi. La unica manera de hacer que funcione el hover es usando dos imagenes lastimosamente. Gracias por las colaboraciones!