Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/02/2012, 02:36
lauchag95
 
Fecha de Ingreso: septiembre-2011
Ubicación: La Plata, Buenos Aires
Mensajes: 26
Antigüedad: 12 años, 8 meses
Puntos: 0
Bordes redondeados se ven mal en fondo con gradiente (IE)

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
  1. .super
  2.     {
  3.         border: 3px #000 solid;
  4.         margin:auto;
  5.         width:1024px;
  6.         height:40px;
  7.         line-height:40px;
  8.         opacity: 0.5;
  9.     -moz-opacity: 0.5;
  10.     filter: alpha(opacity=50);
  11.        
  12.          background-image: -moz-linear-gradient(top, #089DC2, #FFFFFF); /* Firefox 3.6 */
  13.     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #089DC2),color-stop(1, #FFFFFF)); /* Safari & Chrome */
  14.     filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#089DC2', endColorstr='#FFFFFF'); /* IE6 & IE7 */
  15.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#089DC2', endColorstr='#FFFFFF')"; /* IE8 */
  16.  
  17.  
  18.  
  19.      -webkit-border-radius: 10px;
  20.     -moz-border-radius: 10px;
  21.     border-radius: 10px;
  22.    
  23.    
  24.  
  25.     }

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

Código HTML:
Ver original
  1.  
  2. <link rel="stylesheet" type="text/css" href="../estilo1.css"/> <!-- ASOSIACION A ESTILO CSS -->
  3. <script type="text/javascript" src="http://estumundo.netau.net/curvycorners.js"></script>
  4. </head>
  5.  
  6. <div id="super" class="super">
  7. <? include('modulos/super.php'); ?>
  8. </div><!-- FIN DIV SUPER -->
  9. <div id="otro">
  10. </div>
  11. </body>