forma y fondo en div

AitorLopez · #1 (**permalink**) 09/07/2012, 15:19

Hola. Tengo un ejemplo que ahora os pongo, que quiero que funcione igual, tanto en IE9 con el Mozilla. En mozilla hace bien tanto el degradado como la forma de los bordes, pero en IE9 no, podeis probarlo para comprobar lo que digo.

A ver si me podeis decir como puedo solucionarlo. Gracias.

Código HTML:

Ver original<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>pruebas</title>
        
        
        
        
    <style>
 
.forma1{
 
                -moz-border-top-left-radius:200px;
                -moz-border-bottom-right-radius:200px;
 
                !important
                }
 
.fondo1{
 
 
                background: -moz-linear-gradient(bottom, #DDDFF7, #FFFFFF);
 
                filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#DDDFF7', EndColorStr='#FFFFFF', GradientType=0);
 
                !important}
 
 
 
        </style>
        
        
        
        
        
    </head>
     
    <body>
    <div id="prueba" class="forma1 fondo1">
        
        <p>hola</p>
        <p>hola</p>
        <p>hola</p>
        <p>hola</p>
        <p>hola</p>
        <p>hola</p>
        <p>hola</p>
        <p>hola</p>
        
        </div>
    </body>
    </html>

furoya · #2 (**permalink**) 09/07/2012, 18:54

Falta algún prefijo -ms-. No estoy seguro si en IE9 ya funciona la esquina redonda. Busca la sintaxis en los tutoriales.

AitorLopez · #3 (**permalink**) 10/07/2012, 04:04

Hola. Con el prefijo -ms- ya lo probé, pero tampoco funciona, por eso solicito vuestra ayuda.

furoya · #4 (**permalink**) 10/07/2012, 07:59

Ya te la di.

Te dije que buscaras en los tutoriales.

¿O quieres que también lo hagamos por ti?

Código:

-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
StartColorstr='#DDDFF700', EndColorstr='#FFFFFF00');

-ms-filter property

border-radius property

Y una última sugerencia sobre el border-radius : escríbelo en el prompt del buscador de MSDN. Hay un par de datos interesantes.

¿Se te frunce algo más?

AitorLopez · #5 (**permalink**) 10/07/2012, 15:24

Hola Furoya, gracias por tu respuesta, aunque no hace falta que seas tan borde, si todos fueramos tan listos como tu, este foro no existiría, no crees?.

Ademas, esto sigue sin funcionar. Ya te dije que antes de hacer la consulta, aplique el prefijo -ms- y tambien miré documentación, pero al no ser capaz de arreglarlo, consulté en el foro.

Precisamente, lo que hace bien es el degragado, pero en lugar de hacerselo a la forma del div con los valores del border-radius, como hace en mozilla, en IE9 hace al degradado a un rectangulo, sin aplicar el border-radius.

El ejemplo exacto es este, puedes probarlo si quieres.

Código HTML:

Ver original<!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>pruebas</title>
           
           
           
           
        <style>
     
    .forma1{
     
                    -moz-border-top-left-radius:200px;
                    -moz-border-bottom-right-radius:200px;
                                        border-top-left-radius:200px;
                                        border-bottom-right-radius:200px;
     
                    !important
                    }
     
    .fondo1{
     
     
                    background: -moz-linear-gradient(bottom, #DDDFF7, #FFFFFF);
     
                    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#DDDFF7', EndColorStr='#FFFFFF', GradientType=0);
     
                    !important}
     
     
     
            </style>
           
           
           
           
           
        </head>
         
        <body>
        <div id="prueba" class="forma1 fondo1">
           
            <p>hola</p>
            <p>hola</p>
            <p>hola</p>
            <p>hola</p>
            <p>hola</p>
            <p>hola</p>
            <p>hola</p>
            <p>hola</p>
           
            </div>
        </body>
        </html>

furoya · #6 (**permalink**) 10/07/2012, 18:22

Cita:

Iniciado por AitorLopez

si todos fueramos tan listos como tu, este foro no existiría, no crees?.

Qué ganas de responderte a eso...

Pero me acaban de pedir que les tenga más paciencia.

En fin, pon los códigos que te faltan para las esquinas redondas en IE9, y después, cuando no te anden, mira ...¿de nuevo?

los documentos que ...¿buscaste?

en MSDN.

AitorLopez · #7 (**permalink**) 10/07/2012, 23:50

No, mira, mejor vamos hacer otra cosa. Voy a pasar de tus mensajes, ya que no quiero hablar con alguien tan prepotente y si no te importa, si vas a seguir contestando con esa actitud, preferiría que en mis mensajes no lo hicieras, si no te importa.

¿OK?.

Gracias de nuevo. Un saludo.

furoya · #8 (**permalink**) 11/07/2012, 09:04

( Je. ¿Se entiende ahora por qué a estos desubicados no hay que tenerles paciencia?

)