Si pongo degradado para IE, no redondea los bordes

[Trueno2104]

Buenas,

Mi código CSS es el siguiente:

height: 40px;
width: 180px;
font-size: 16pt;
font-weight: bold;
margin-top: 20px;
margin-left: 35px;
background: #2f3030;
border: 2px solid #242424;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: -moz-linear-gradient(top, #2f3030 , #191919);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#2f3030), to(#191919));
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#2f3030', endColorstr='#191919');
cursor: pointer;

Si dejo el:

filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#2f3030', endColorstr='#191919');

Entonces los bordes redondeados desaparece y queda así:


Si comento esa parte del código, si que aparecen los bordes redondeados (pero obviamente, no tengo degradado):


¿En qué puedo estar equivocándome?

De paso aprovecho y a ver si alguien puede decirme, ¿estas propiedades son válidas para IE8 también? ¿Me dejo alguna para algún otro navegador?

Gracias!

[furoya]

Hubiese sido interesante ver el código completo.
Y sobre todo verlo entre etiquetas de código. Por que usaste etiquetas de cita, y, como habrás notado, te arruinaron el ejemplo.
La próxima poné una demo completa de tu problema, y entre etiquetas [code].


Seguramente estás usando un IE9, y como no tengo uno para probar te dejo algunos enlaces y vos mirás qué te sirve.

Los bordes redondos no funcionan en versiones anteriores. Algunos usan "archivos de compatibilidad" (*.htc ; *.js) que como tienen un escript que reescribe estilos, pueden pisar alguno que haya en tu CSS, pero si los estuvieras linkeando nos hubieses dicho -no te vas a olvidar un detalle así- por no decir que ya los tendrías desarmados para ver si el problema es justamente esa incompatibilidad con tu código.

Y te faltó -o-border-radius, pero ya no se usa.

¿Navegadores para svg y css?

border raidus no funciona en IE9

[Trueno2104]

No entiendo porque no se puede interpretar lo que he puesto con las etiquetas QUOTE, al fin y al cabo no veo ninguna diferencia entre ellas (no al menos para entender lo que digo).

No tengo ningún archivo vinculado al CSS, es lo último que quiero probar.

Lo he probado en IE9, que es el que me interesa, más tarde ya me pelearé con el IE8 (versiones anteriores ya no me interesan).

En Google Chrome, que es con el que normalmente trabajo, funciona tanto el degradado con los bordes.
En IE9 funciona o una cosa, o la otra, pero no ambas a la vez (como se ve en las imágenes que he puesto).

Entonces el problema no creo que sea que no funciona uno de ellos, porque lo hacen, sino que no funcionan juntos.

Gracias.

[MiNick]

¿Has probado a quitar la línea esa que comentas y poner simplemente

"opacity:0.2;" después de "-moz-border-radius: 4px"

CREO que debería de funcionarte;

[Trueno2104]

Iniciado por MiNick

¿Has probado a quitar la línea esa que comentas y poner simplemente

"opacity:0.2;" después de "-moz-border-radius: 4px"

CREO que debería de funcionarte;

En ese caso bajaría la opacidad del botón, cuando yo lo que quiero es hacer el degradado pero con los bordes redondeados.

¿Me equivoco?

[Trueno2104]

¿Alguien puede echarme una mano?
Gracias.

[memoadian]

Probablemente no sean compatibles, los filters con border radius, yo siempre prefiero evitarlos.

además tampoco hay mucha diferencia entre los dos botones que pones. A mi incluso en IE9 con ese código me sale un degradado azul

menuda cosa. Si te es muy importante tener el botón con degradado, puedes usar css3 pie

[furoya]

Iniciado por Trueno2104

No entiendo porque no se puede interpretar lo que he puesto con las etiquetas QUOTE, al fin y al cabo no veo ninguna diferencia entre ellas (no al menos para entender lo que digo).

No entendés porque no tenés experiencia en preguntar, ni mucho menos responder, en un Foro.

Poné un ejemplo completo, que puedan probar, y entre etiquetas de código.
Y guardate las objeciones.

Remarco lo de "puedan", porque yo no tengo un Internet Explorer 9, así que no te puedo ayudar. Si hacés una versión para IE8, quizá la semana que viene la pueda ver, porque tengo que pasar por un cliente que tiene uno instalado.

[Trueno2104]

Iniciado por memoadian

Probablemente no sean compatibles, los filters con border radius, yo siempre prefiero evitarlos.

además tampoco hay mucha diferencia entre los dos botones que pones. A mi incluso en IE9 con ese código me sale un degradado azul

menuda cosa. Si te es muy importante tener el botón con degradado, puedes usar css3 pie

¿Puedes explicarme más de css3pie, por favor?
Me lo he estado mirando y no entiendo muy bien su funcionamiento.

Gracias ;)

[furoya]

Estoy seguro de que memoadian va a tener la mejor voluntad del mundo para explicarte, pero entendé que éste no es un sitio de soporte para css3pie. El Foro y la web están llenas de explicaciones y no creo que se pueda agregar más.

http://www.forosdelweb.com/tags/css3pie.html

http://www.google.com.ar/search?q=cs...pie&oq=css3pie

Por otro lado, lo único que hacen esos inventos es capturar las declaraciones de estilo "estandarizadas" y reescribir el código con un escript para emular los formatos en IE.
Algo que podemos hacer perfectamente en el documento por nosotros mismos, como habrás visto en los enlaces que te dejé.

Y aún usando un *.js externo, tampoco hay garantías de nada, porque para tu caso aún no te dignaste a mostrar un ejemplo de tu problema. Y es posible (y hasta probable) que haya un error en el código y por eso no te funcione en IE9.

[memoadian]

Es muy cierto lo que dice furoya, aunque pie te facilita bastante el trabajo, aunque es cierto que ya no lo uso, pero su uso es extremadamente simple.

tan simple que en 2 lineas se explica.

descarga el archivo pie.htc y ponlo en tu carpeta web
introduce tu regla css3 y pon abajo de esta entre parentesis la ruta absoluta al pie.htc

no hay más.

Yo probé los filtros IE con degradado, y border radius y me pasa lo mismo que a él, incluso peor