¿Podrías poner un ejemplo mas completo?, como cuando y como usarlo, etc.
Como un <img src="" /> que use tu tecnica o algo similar. Por:Ed
Hablando de Fondos (backgrounds) con CSS. Si a esto lo agregamos dentro de un Condicional de IE, eso quedaria muy bien. Y seguiria siendo estándar. Recuerden que se debe cambiar "imagen.png" por la ruta de su imagen que usan. Por:NEO_JP
Se podría implementar de alguna manera para los que utilizan png en su avatar dentro del foro? Por:glsmaster
glsmaster :
Se podría implementar de alguna manera para los que utilizan png en su avatar dentro del foro?
Donde cambiamos imagen.png por la url de tu imagen. Por:Alan
¿Pero esto hasta cierto punto no es malo? digo con "trucos" como este IE o mejor dicho sus desarrolladores no se preocupan por mejorar el codigo ya que (quizas) ni se dan cuenta.
Aunque tambien queda de manifiesto que el navegador si puede hacer ciertas cosas y quizas sea mas que por razones tecnicas por razones politicas de Hasecorp.
Pero tambien para un Desarrollador de paginas es un alivio ya que podra usar pngs y que se ven decentes aunque al costo que no sera validada la pagina. Por:Drakedalfa
DrakeDalfa_blog :
...tambien para un Desarrollador de paginas es un alivio ya que podra usar pngs y que se ven decentes aunque al costo que no sera validada la pagina.
Pero como ya dijeron, ponerlo en un condicional de ie es la manera de hacerlo Por:Alan
Si, todo bien, muy bonito... pero han probado con transparencias en PNG-32 bits?... al parecer IE solo soporta (con esta regla) hasta PNG-24
Aun no he encontrado una respuesta a esta pregunta ...
Asi, jovenes, en sus carreras profesionales por favor, no imiten estos casos y alejense a por lo menos 10 metros de individuos con estos problemas. Es por el bien de la humanidad. Por:Freddie
Un ejemplo en vivo puede ser encontrado en mi sitio Por:Alan
Disculpen por el comentario que deje, la verdad no me ha funcionado en Imagenes en formato PNG-32 bits, en todo caso es algo que yo estoy haciendo mal .. solo me ha funcionado con imagenes PNG de 24 bits, aunque llega a funcionar en gran parte pero toma un comportamiento de una imagen GIF (Se ve como un GIF)... Solo era para una prueba que estaba haciendo así que no hay problema... ...
Pero con otras imagenes si han saldio muy bien, eso es lo que cuenta verdad?
Buenas, como digo siempre, porque le buscan tantas vueltas a las cosas, si por css funciona y muy bien , pero imaginese ponercelo a mas de 30 imagenes, que despelote, por eso es que toda una vida es mejor el javascript viendo las cosas pues les regalo un codigo todo bonito que vi por hay
Exacto Daat_lod, lo mejor es usar un Javascript como el que se usa en Cristalab, y luego es solo cuestión de agregarle el condicional IE solo para navegadores debajo de IE7. Por:NEO_JP_blog
Esperen un momento que es una condicional, como hago eso Por:GersonM_blog
Freddie® :
Asi, jovenes, en sus carreras profesionales por favor, no imiten estos casos y alejense a por lo menos 10 metros de individuos con estos problemas. Es por el bien de la humanidad.
"Eso" ya se lo mande yo a Freddie hace tiempo como tutorial... pero veo que sigué empolvandose como las telarañas dentro de mi cartera... aquí teneís lo que le envie... con ejemplos y todo...
Aoyama :
Uso de PNG's transparentes en IE
Uno de los problemas a los que nos enfrentamos los desarrolladores y diseñadores web a la hora de hacer nuestra aplicación compatible, es el escaso soporte de Internet Explorer al formato png transparente, y aunque IE7 traerá una semi-impletación de esto, tampoco podemos fiarnos mucho de ello, para resolver este problema, hemos de recurrir a unos cuantos hacks que a continuación veremos.
Colocar imágenes, el tag IMG
Lo primero que debemos hacer, es obviamente detectar el navegador que estamos usando, para ello usaremos un poco de javascript, veamos algo de código:
Observa que detectamos con <!--[if lt IE 7]> una versión anterior al IE 7, si es encontrada, entonces cargaremos el archivo javascript que en este caso he llamado png.js y terminamos con <![endif]-->, por obvias razones, este código nunca se ejecutará en un navegador diferente. Analicemos ahora el contenido del archivo javascript.
Código :
var detectada = navigator.appVersion.split("MSIE") //Primero detectamos que se trata de IE en realidad var version = parseFloat(detectada[1]) //Luego obtenemos el número de versión
if ((version >= 5.5) && (document.body.filters)) //Preguntamos por la versión 5.5 o superior o si existe el elemento filters { for(var i=0; i<document.images.length; i++) // Analizamos todas las imágenes del documento { var img = document.images[i]; //Tomamos el nombre de la imagen actual en el ciclo var imgName = img.src.toLowerCase(); //convertimos a mínusculas if (imgName.substring(imgName.length-3, imgName.length) == "png") //detectamos la extensión { var strHTML = "<span " + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + ";" + // creamos un span con las medidas de la imagen actual "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" //filter es un elemento único de IE, usamos el objeto AlphaImageLoader de la colección DXImageTransform, pasando como fuente del filtro, la misma imagen y escalamos la imagen con sizingMethod img.outerHTML = strHTML //Luego obligamos a la imagen a cargar este código en forma de variable } } }
Con eso, ya podemos colocar cualquier imagen png en nuestras desarrollos.
Imágenes como fondo
El anterior código, funciona muy bien para poner imágenes, pero no para colocar fondos, en realidad colocar fondos es aún más sencillo, necesitaremos crear dos archivos css, una para IE y otro para el resto, por lo tanto debemos modificar un poco el código de detección de IE:
He llamado al archivo ie.css, puedes llamarlo como deseés, este archivo sólo se cargará si se detecta IE como navegador. Pongamos primero el código normal para poner una imagen de fondo en un div que está dentro del archivo estilo.css
Nada nuevo hasta ahí, ahora veamos mismo código pero dentro del archivo ie.css
Código :
#header { width: 600px; height: 178px; background: none; /* Aquí quitamos cualquier fondo existente */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="fondo.png", sizingMethod="image"); /*cargamos la imagen igual que como lo hicimos con la etiqueta img, pero el método de escala será ahora image, es decir, la misma imagen */ background-repeat:no-repeat; margin-left: 200px; }
Hecho esto, ya podemos poner nuestra fondo donde queramos. Como nota final, si están usando Windows XP SP2, quizá deban autorizar la ejecución del hack en su navegador. Cualquier pregunta, dirigirse a los foros.
"Eso" ya se lo mande yo a Freddie hace tiempo como tutorial... pero veo que sigué empolvandose como las telarañas dentro de mi cartera... aquí teneís lo que le envie... con ejemplos y todo...
Juro por la100rra que jamas lo recibí y que probablemente mi spamassasin se lo trago! Por:Freddie
IE 7 no soporta las transparencias de los PNG? No era esta una de las "novedades" de IE7? Por:Sanwar_blog
Sanwar_blog :
IE 7 no soporta las transparencias de los PNG? No era esta una de las "novedades" de IE7?
Está excelente ignoraba que se podía hacer eso, yo que tengo el IE7 me funcinó todo bien, obvio nunca voy a poder usar esos scripts porque me dedico a hacer sites porfesionales, ya saben por el problema del W3C.
Pero a todos los que hacen páginas, blogs etc, les va a funcionar muy bien. Por:Lu_blog
Dios que triste que los propios usuarios tengan que sacarse las castañas del fuego para conseguir algo tan obvio. Estos de Microsoft pensando en virguerias y no son capaces de ofrecer un "triste" navegador en condiciones. Por supuesto yo uso Mozilla Firefox. No soy un fanático antiMicrosoft pero hay ciertas cosas que... Por:Tronzo_blog
Lu_blog :
Está excelente ignoraba que se podía hacer eso, yo que tengo el IE7 me funcinó todo bien, obvio nunca voy a poder usar esos scripts porque me dedico a hacer sites porfesionales, ya saben por el problema del W3C.
Pero a todos los que hacen páginas, blogs etc, les va a funcionar muy bien.
O sea que yo no hago sites profesionales?
PD: si, que problema lo del W3C, horrible. Por:Ramm
Lu_blog :
Está excelente ignoraba que se podía hacer eso, yo que tengo el IE7 me funcinó todo bien, obvio nunca voy a poder usar esos scripts porque me dedico a hacer sites porfesionales, ya saben por el problema del W3C.
Pero a todos los que hacen páginas, blogs etc, les va a funcionar muy bien.
Dios que triste que los propios usuarios tengan que sacarse las castañas del fuego para conseguir algo tan obvio. Estos de Microsoft pensando en virguerias y no son capaces de ofrecer un "triste" navegador en condiciones. Por supuesto yo uso Mozilla Firefox. No soy un fanático antiMicrosoft pero hay ciertas cosas que...
Sigh, ya dijeron que en una condicional ya no da problemas con la validacion... Por:Alan
ramm :
Lu_blog :
Está excelente ignoraba que se podía hacer eso, yo que tengo el IE7 me funcinó todo bien, obvio nunca voy a poder usar esos scripts porque me dedico a hacer sites porfesionales, ya saben por el problema del W3C.
Pero a todos los que hacen páginas, blogs etc, les va a funcionar muy bien.
O sea que yo no hago sites profesionales?
PD: si, que problema lo del W3C, horrible.
Si si... muy lamentable eso del W3C ... ... ... deberían enviarles unos ... Por:Aoyama
Para fondos no vale Por:erdanblo_blog
erdanblo_blog :
Para fondos no vale
Claro que sí. Es solo que no tuviste suficiente creatividad para implementar la solución Por:Freddie
NOTA MUY IMPORTANTE NUMERO UNO: ESTO ES UN ESTILO DE CSS, LOS CSS PUEDEN SER INTRODUCIDOS EN LINEA (DENTRO DE LA ETIQUETA IMG) O UN ARCHIVOS CSS EXTERNO. POR LO TANTO, SE PUEDE USAR CON "BAKGRAUNDZ" (BACKGROUNDS).
NOTA MUY IMPORTANTE NUMERO DOS: ESTO SOLO ES NECESARIO PARA INTERNET EXPLORER, POR LO TANTO PUEDE SER INTRODUCIDO MEDIANTE UN CONDICIONAL DE IE MENOR A IE7 Y FUNCIONARÁ SIN PROBLEMAS (PARA VER MÁS, MUEVA EL SCROLL HACIA ARRIBA).
PD: Y si, en mayúsculas y rojo para que lo lean. Por:NEO_JP
erdanblo_blog :
Para fondos no vale
Supondré que como siempre... no leíste para nada el tutorial que les pusé, ¿verdad? ... ... léelo ... y prueba... Por:Aoyama
Como se hace en el caso de que la imagen png tenga unos valores de posicion en el CSS. Por ejemplo:
Si ponemos el CSS para ie, siguiendo el ejemplo para backgrounds transparentes que nos puso "Aoyama" nos queda el IE.css de esta manera:
#header { padding: 12px 11px 11px 46px; float: left; background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="img/website.png", sizingMethod="crop"); margin-left: 4px; } Y efectivamente nos hace la transparencia pero los valores de posicion no-repeat 10px 5px de la imagen de fondo se pierden...
Gunther ya te habia mencionado que el sizing Method="crop" no te iba a funcionar... puedes usar scale o image en su lugar.... Por:Aoyama
Pues miren por más que sigo los paso a mi en IE 6.0 con WinXP SP2 no me quiere funcionar. Alguna idea de que pueda ser? Miren el código Javascript: [code] var detectada = navigator.appVersion.split("MSIE") var version = parseFloat(detectada[1])
if ((version >= 5.5) Por:ReynierPM_blog
Yo he introducido el condicional de IE tal y como Aoyama recomienda, y me funciona bien, pero en cuanto meto otros javascript, al tener el atributo "defer", no me deja visualizar el resto de javascripts. He intentado quitar el "defer" pero entonces, no visualiza la transparencia de los png. ¿Qué puedo hacer? Por:Sue_blog
No deberías tener mucho problema, de cualquier forma aquí tienes una explicación más detallada del atributo defer para que revises bien... una solución rápida es que cargues lo demás en otro archivo javascript sin defer... Por:Aoyama
por que no crear una ventana donde se pueda cambiar a formato png una imagen gratis seria bueno Por:joseluis_blog
hola muchachos, he probado esto del maldito truco del png para Internet Explorer, bueno, tu problema se debe a lo mejor porque el bloque donde quieres colocar el fondo png no está definido en largo y ancho, es por eso que no muestra el fondo png, tienes que definirle un ancho y largo para que te funcione, si es un png que ocupa todo el tamaño del bloque (un div, un H, un p etc etc), puedes poner 'image', si pones 'sacale' y el png es más chico, se estirará, sí te va a funcionar el 'crop' si la imagen es más pequeña que el tamaño del bloque, si el bloque tiene tamaño variable, ponle un porcentaje de ancho.
tengo un problema con los fondos png cuando hago el parche para ie, los uso en un formulario. especificamente no funcionan los input, ni los botones probe camviando el z-index pero no funciono
este es el codigo
Código :
<!--[if IE]><style type="text/css"> .contenedorData{ width: 100%; height: 100%; background: none; /* Aquí quitamos cualquier fondo existente */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="styles/fondotrans.png", sizingMethod="crop"); /*cargamos la imagen igual que como lo hicimos con la etiqueta img, pero el método de escala será ahora image, es decir, la misma imagen */ background-repeat:repeat;
Agradesco el dato querube_blog, sirvio el parche para BUGEXPLORER. Por:dugalman_blog
Bien he de decirles otra vez que el sizingMethod debe ser scale, image o fit... cualquier otro método da malos resultados... no usen crop ni nada parecido... Por:Aoyama
estimado Aoyama,
yo he usado el crop para los casos en que el png sobrepasa el tamaño de la caja y me ha funcionado perfecto: www.muchik.com/svq
Cabe mencionar yo uso, por ejemplo, image para mostrar la imagen png completa, fit para ajustarla y crop para recortarla, en ningún caso acepta repeat como atributo en CSS
a ver, pero porq no usais un archivo css externo?...
Yo implemento el filtro en un css con clases, para fondos o bordes de tablas, etc.. y luego con hacer la llamada listo.. Por:walvaRo_blog
yo uso un CSS externo siempre Por:
Yo tengo un problema al alinear los fondos dentro de las tablas o de las columas de las tablas ya que en cualquier caso de todos los ya mencionados me aparece siempre alineado a la izquierda y arriva y yo necesito alinearlo a la derecha y en medio, como ven si me pueden ayudar?? Por:MichelH
A ver... ¿Nadie se ha dado cuenta de que el truco del fondo png en css funciona bien visualmente pero deshabilita las funciones principales del cursor? (en Ie claro)
Pues fijaos bien, si se pone un texto en una tabla o div con la el estilo o id del fondo png aplicado el cursor no cambia al pasarlo por encima del texto, lo mismo pasa con los enlaces de texto o de imagen.
Para corregirlo se debe incluir en el css condicional para ie, esto:
a { cursor: pointer; }
Al menos se corrige el error para los enlaces. Por:JAMEK_blog
a { cursor: pointer; }
Al menos se corrige el error para los enlaces(de texto).
No he conseguido reparar el cursor (seleccion de texto) para cuando lo situas encima del texto, ni las imagenes con enlace en teoria con esto bastaria:
text { cursor:text; } img a { cursor: pointer;)
Pero no funciona.
De todas maneras esto seria una manera socorrida y chapucera de arreglarlo.
En resumen; si quieres usar tranparencias para fondo de texto, texto con enlaces o imagenes con enlaces y que funcione todo en ie mejor... busca otra alternativa porque este sistema interfiere en la navegabilidad del usuario. Por:JAMEK_blog
P.D. De todas maneras es un buen truco. Por:JAMEK_blog
El js que puso Querube es una buena alternativa y no hace falta lo de 'filter: progid:DXImageTransform.Microsoft.AlphaImageLoader' en el css simplemente se asigna la imagen png como background y se corrige el error en el ie automáticamente. Por:freak_blog
freak_blog :
El js que puso Querube es una buena alternativa y no hace falta lo de 'filter: progid:DXImageTransform.Microsoft.AlphaImageLoader' en el css simplemente se asigna la imagen png como background y se corrige el error en el ie automáticamente.
Hola... alguien ha tenido problemas al momento de aplicar 'maps' usando el fixPNG ?
Al momento de aplicar una href por mapping a un png que es tratado por el .js este se me es desahabilitado... Por:glsmaster
estoy feliz por fin me resulto solucionar el problema, en este blog tambien se trato el problema http://www.csslab.cl/?p=65 , yo personalmente lo estoy implementando de la siguiente forma en mi CSS. digamos que le asigno la clase "titular" a una tabla donde pondre titulares y preciso darle un fondo transparente, entonces:
Código :
.titular1{ background-image: url(ruta/fondo.png) !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='ruta/fondo.png', sizingMethod='scale'); background: repeat-y;/*o lo que se te venga en gana */ }
** inyaka mira su cama mullida, comoda y ve de que es tiempo de dormir Por:Inyaka
en el link se explica muy bien para que sirve !important , basicamente le dice a nuestro bienamado FF que no tome en cuenta la ensalada de tonteras que le damos a nuestr bienodiado IE Por:Inyaka
Hola a todos, aunque no encontre una forma para resolver el problema de los vinculos, botones y demás usando la transparencia para IE, lo que hice fue aplicar el parche solo a las zonas donde era necesario, por ejemplo, para el caso de un menu donde me interesaban solo los bordes con transparencia (sombra), aplique el parche solo a esas partes, donde se ubican mis botones/vinculos, es un fondo normal...
Saludos (espero que se de utilidad) Por:Thor_blog
Hola buenas noches o dias.. ya hasta perdi el sentido del tiempo sentado en mi pc..
Bueno mi problema es el siguiente... he logrado hacer las transparencias png de cualquier formato de compresion.. con eso no hay problemas.. ahora, cuando intento utilizar un layer (capa) que me permita mover libremente la imagen por la pantalla, esta no pierde el beneficio de la tranparencia, pero si pierde la movibilidad.. creo que esta funcion se llama drag.. o algo asi.. con "firefox" no tengo este problema.. Agradezco a quien pueda ayudarme.. Saludos. Por:ecosonoro_blog
Alguna alma caritativa que me indique si puedo utilizar pngs en las etiquetas body o html?
El objetivo es que el ond tiene una transparencia, la cual esta encima del color del background asi doy una mayor facilidad para cambiar mi diseño, en el siguiente grafico explico un poco mas en detalle:
-> <body> PNG (con transparencia y se debe repetir por toda la pantalla) -> <html> background(el color cambia cada vez que yo quiera)
puedo hacer esto????????? en internet explorer o alguna solucion alternativa???? Por:jch
Graciaaasss INYAKA!!!! despues de dias de partirme el coco al fin arreglaste mi problema con dos lineas de codigo, jajaja, que bueno que compartiste el truco, ahora yo tambien soy feliz Por:excavadora_blog
el javascript de daat_lod funciona perfecto!
IE6 WinXPSP2 Por:madman_blog
Yo voy por el mismo sentido, tengo una web realizada completamente con png transparentes, trabajando con capas, y además con imagenes de sustitución. Como meto todo esto en una batidora y se me vea bien en explorer por debajo de 7. Por:Jorge_blog
¿ Qué significa esa intromisión política de ese tal Fredie en el medio de este tema ? Ya guardé la página y voy a estudiar como implementar el tema. Siempre leí que PNG tenía transparencia variable y acá queda claro como abordar su experimentación. Por:Daniel Rodríguez_blog
Yo tengo el siguiente problema, utilizo el javascript que ha facilitado Aoyama y funciona perfectamente, pero estoy haciendo una pagina con el tipico catalogo de fotos, y claro, está paginado. Pues el javascript me funciona bien pero solo en la primera pagina, cuando cambio de pagina las fotos ya no me las coge, bueno mas bien lo que hace es que las transparenta enteras, o no las pone, vamos. Por:Jesus_blog
A mi no me funciona, pongo exactamente esto en la css filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='imagen.png',sizingMethod='scale');
y esto en una imagen que hay en una capa q esta por encima de todo y no me crea las transparencias, sale azul. y en ie7 me sale bien. (Por supuesto la foto q utilizo se llama image.png) <img src="imagen.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='imagen.png',sizingMethod='scale');" alt="" /> Por:
En esta pagina viene todo perfecto, con una demo para bajar, y no andar con lios
Esto... estaba usando la solución y para ponerlo como fondo tuve que usar la ruta absoluta y no relativa, no sé si sólo me pasó a mí o es que tengo mucho tiempo sin pararme de la silla y ya no sé ni que hago ni porqué... pero en fin...
saludos Por:Duilio_blog
Duilio_blog :
Esto... estaba usando la solución y para ponerlo como fondo tuve que usar la ruta absoluta y no relativa, no sé si sólo me pasó a mí o es que tengo mucho tiempo sin pararme de la silla y ya no sé ni que hago ni porqué... pero en fin...
saludos
Bueno, es que al aplicar el filtro debes poner una ruta relativa al documento (X)HTML no al CSS, no hace falta que sea absoluta ni mucho menos, prueba y verás. Por:Johnny
Pues si funciona el truco los png se ven transparentes pero no logro que la imgen png se repita, alguien me puede ayudar.
Saludos!! Por:Rodo_blog
Y os funciona el codigo dentro de una capa visible, vamos como para poner una marca de agua, a mi con el explorer imposible, con el firefox no tengo ningun tipo de problema en ningun caso, ni le hacen falta los scripts, tambien es verdad que funcionan mejor los png8 con trapsarencia Por:Ai_d_A_blog
Gracias todos aquellos que os molestais en ayudarnos a los que no sabemos. Por:mortadelo
Freddie :
erdanblo_blog :
Para fondos no vale
Claro que sí. Es solo que no tuviste suficiente creatividad para implementar la solución
Pos va a ser que hay mas gente sin imaginación por que no funciona en fondos, o a lo mejor será que tienes mucha y ves de mas , seguire intentando echarle imaginación Por:Supino
IE apesta!!!!!!!!! Por:purplepark_blog
Como se hace para que el png se pueda repetir usando todas esas soluciones. No encontrado alguna respuesta sobre eso. Por:HTXML
Joder gracias por fin una solucion q funciona, ni pngfix.js, ni historias, esta es la unica q me ha pirulado, apuntate una amigo Por:salvado_blog
Inyaka :
estoy feliz por fin me resulto solucionar el problema, en este blog tambien se trato el problema http://www.csslab.cl/?p=65 , yo personalmente lo estoy implementando de la siguiente forma en mi CSS. digamos que le asigno la clase "titular" a una tabla donde pondre titulares y preciso darle un fondo transparente, entonces:
Código :
.titular1{ background-image: url(ruta/fondo.png) !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='ruta/fondo.png', sizingMethod='scale'); background: repeat-y;/*o lo que se te venga en gana */ }
** inyaka mira su cama mullida, comoda y ve de que es tiempo de dormir
INYAKA MUCHAS GRACIAS TU TIP ES EL UNICO QUE ME SIRVIO Por:MichaelC
Vaya panda de emocionados! A ver si respetamos más al gremio. Cualquier programador que le pone interés es por lo menos sujeto a recibir un trato correcto. Los prepotentes mejor que se dediquen a picar codigo que es lo suyo en lugar de comentar. Por:ZRJ_blog
Gracias por este post me ayudó mucho en mi trabajo. Estuve horas en google buscando una solución a mi problema con PNGs transparentes y aquí encontré la solución. Saludos Por:josedelaranda_blog
Buenas, he conseguido la transparencia en fondos .png que se repiten en el eje-x, pero, tengo un problema, y es que, tengo varios divs a los que les quiero poner un fondo png con transparencia, sin que se repita, le tengo puesto float:left, pero no me coloca la imagen y no se porqué es. Lo curioso es que si le quito el float:left funciona perfectamente, pero no me permite colocar el div como quiero. El código está en mi web, http://www.mussra.es (si entras con firefox, verás el resultado que busco). A ver cuando la gente se entera de que IE no vale la pena, o los de microsoft hacen porfín una versión en condiciones ... Por:mussra
aquí teneís lo que le envie... con ejemplos y todo... 
... 
por fin me resulto solucionar el problema, en este blog tambien se trato el problema http://www.csslab.cl/?p=65 , yo personalmente lo estoy implementando de la siguiente forma en mi CSS.