Bordes redondeados se ven mal en fondo con gradiente (IE)

lauchag95 · #1 (**permalink**) 15/02/2012, 02:36

Hola!
Tengo un div con un fondo de gradiente que a su vez tiene unos bordes redondeados. Para la mayoría de los navegadores funciona, y uso las características CSS3.
Pero para IE, utilizo el plugin CurvyCorners (http://www.curvycorners.net/), pero el resultado que obtengo no es el deseado.

RESULTADOS OBTENIDOS
NAVEGADORES CHROME, ETC

INTERNET EXPLORER

Bueno:

CSS de la clase super

Código CSS:

Ver original.super
    {
        border: 3px #000 solid;
        margin:auto;
        width:1024px;
        height:40px;
        line-height:40px;
        opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
        
         background-image: -moz-linear-gradient(top, #089DC2, #FFFFFF); /* Firefox 3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #089DC2),color-stop(1, #FFFFFF)); /* Safari & Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#089DC2', endColorstr='#FFFFFF'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#089DC2', endColorstr='#FFFFFF')"; /* IE8 */
 
 
 
     -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
    
 
    }

HTML/PHP cargando el script y ejecutando el div con clase super

Código HTML:

Ver original<head>
 
<link rel="stylesheet" type="text/css" href="../estilo1.css"/> <!-- ASOSIACION A ESTILO CSS -->
<script type="text/javascript" src="http://estumundo.netau.net/curvycorners.js"></script>
</head>
 
<body>
<div id="super" class="super">
<? include('modulos/super.php'); ?>
</div><!-- FIN DIV SUPER -->
<div id="otro">
</div>
</body>

emprear · #2 (**permalink**) 15/02/2012, 07:14

Usá
http://css3pie.com/
Demo:
http://foros.emprear.com/css/linear-.../menu-pie.html
Saludos

lauchag95 · #3 (**permalink**) 15/02/2012, 09:19

emprear, sigue igual, aunque probé sacándole el fondo e indudablemente se ve bien D:

creo que lo que haré es que en IE se vea sin fondo degradado.. aunque estube viendo el codigo fuente del ejemplo y no sé como hicieron ellos, pues en IE se ve perfecto.

emprear · #4 (**permalink**) 15/02/2012, 10:07

El ejemplo de la demo es mio, lo que genera el estilo es (te lo aplico directamente a un div)

Código CSS:

Ver originaldiv#demo{
background-image: linear-gradient(bottom, #382C33 16%, #998989 58%);
background-image: -o-linear-gradient(bottom, #382C33 16%, #998989 58%);
background-image: -moz-linear-gradient(bottom, #382C33 16%, #998989 58%);
background-image: -webkit-linear-gradient(bottom, #382C33 16%, #998989 58%);
background-image: -ms-linear-gradient(bottom, #382C33 16%, #998989 58%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, #382C33),
    color-stop(0.58, #998989)
);
-pie-background: linear-gradient(#382C33 16%,#998989 58%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(PIE.htc);
}

Desde ya tenes que bajarte la PIE.htc

Saludos

lauchag95 · #5 (**permalink**) 15/02/2012, 17:16

Bueno, sin duda que algo raro ocurre..
estoy probando exactamente el código fuente de tu página en la mía y ¡aún así no funciona!

El PIE.htc está insertado en el root del servidor.. por lo que supongo que está bien insertado.. ¿alguna idea de lo qué podría estar pasando?

PD: creo que lo que no funciona es el atributo -pie-background , hay que hacer algo especial para poder utilizarlo?

PD2: Como dije antes, ese atributo no funciona. Logré que el div tenga bordes redondeados en IE pero no me muestra el degradado con el atributo -pie-background y si uso el filter correspondiente los border-radius me salen muy mal.

emprear · #6 (**permalink**) 15/02/2012, 18:44

Probá de poner en tu .htaccess

Código Apache:

Ver originalAddType text/x-component htc

ó de usar PIE.php (que viene en el zip)

Todos los filter, -ms-fiter, los tenés que eliminar
si no pasá la url de la página
Saludos

walterfcr · #7 (**permalink**) 15/02/2012, 19:33

como se hace para que ese PIE funcione en ie8??