Problema con bordes redondeados y barra de scroll vertical

rw523252 · #1 (**permalink**) 10/03/2012, 13:13

Hola chicos, tengo un incoveniente, no puedo ver los bordes redondeados en los botones de un formulario y evitar que se vea la barra de scroll (sólo en IE) en el área comentarios , ya he probado con distintos métodos, y .htc (border-radius, ie-css3, pie, ) y si veo el borde redondeado en el área de comentarios, y no en los botones (el borde sí en IE 9), y tampoco sacar el scroll vertical, si alguien tiene alguna idea de como modificar esto, les agradezco un montón, saludos.
La url es: http://miweb.net84.net/

rw523252 · #2 (**permalink**) 10/03/2012, 13:47

Hola amigos, ya pude eliminar el scroll vertical, del área de texto, con el atributo "overflow: auto" , del área de texto, sólo quedan los botones, si alguien sabe, espero ayuda, saludos!

cristian_cena · #3 (**permalink**) 10/03/2012, 13:48

ie8 no soporta border-radius http://caniuse.com/#search=border-radius.
hay alternativas como usar un png de fondo o usar alguna librería: http://css3pie.com/
Podes detectar el soporte de propiedades entre navegadores y actuar en consecuencia: http://www.modernizr.com/

rw523252 · #4 (**permalink**) 10/03/2012, 13:54

Hola Cristian, estoy usando la librería pie, también probé la ie-css3, y la border radius, en los campos del formualrio se ve el borde redondeado, pero no el los botones, solo el contorno en el IE9, en el 8 los veo rectangulares, tenés alguna idea por que puede ser? gracias por responder, saludos!

cristian_cena · #5 (**permalink**) 10/03/2012, 15:17

supongamos tenes:

Código HTML:

Ver original<input id="miboton" type="button" value="mi botón">

luego bajas la librería y la colocas en head:

Código HTML:

Ver original<script type="text/javascript" src="directorio/PIE_uncompressed.js"></script>

luego en el css le declaras la propiedad "behavior"

Código CSS:

Ver original#miboton{
    border:1px solid gray; 
    border-radius: 10px;
    behavior: url(directorio/PIE.htc);
}

Lo probé en ieTester y funciona ie6+, probablemente tengas mal colocada la ruta o te estes olvidando alguno de estos pasos.
Saludos.

rw523252 · #6 (**permalink**) 10/03/2012, 15:19

Gracias amigo!!! no lo estoy haciendo así, enseguida lo pruebo y posteo, saludos!

rw523252 · #7 (**permalink**) 10/03/2012, 18:20

Hola Cristian ! no lo puedo hacer funcionar, entiendo el código que me pasaste, y yo se que es correcto, cuando lo leí dije, si esto funciona, la única diferencia, en vez de declara la propiedad, se la atribuyo como una clase, voy a seguir probando, gracias por responder, saludos!

rw523252 · #8 (**permalink**) 10/03/2012, 19:24

Cuando hago la vista previa desde dreamweaver, para ver en IE, sale un cartel en IE, y dice: que no permite la ejecución de scripts o controles ActiveX, ahí los botones se ven redondeados, y cuando permito, se ven con borde redondeado pero rectangulares. Eso noté recién.

cristian_cena · #9 (**permalink**) 11/03/2012, 17:04

Solo tenes que tener bien la ruta a PIE_uncompressed.js desde tu pagina .html y la ruta a PIE.htc desde tu hoja de estilos (o desde tu pagina si incluiste los estilos en <style> dentro de <head>). Ojo con esto, porque tu hoja de estilos posiblemente este dentro de un directorio llamado "css" mientras que tu archivo html posiblemente está en la raíz de tu sitio.

Cita:

"Cuando hago la vista previa desde dreamweaver".

Dw no te garantiza nada, al menos recuerdo que cuando lo usaba nunca me guiaba por el modo diseño ya que distaba muchisimo de la realidad.
IETester es celoso con los scripts y además lento, tampoco me gusta pero es lo que hay. En última medida la mejor opción será instalar windowsXP en una maquina virtual y correr sobre el la version vieja de ie que quieras. Pero como te dije, lo probé en ieTester y funciona.

Sobre el problema, tal vez tengas algun script que este dando error.
En tu lugar probaría en principio lo básico, es decir, buscaría que ande la librería css3pie y a partir de ahi recién incluiría lo demás.

Saludos.

rw523252 · #10 (**permalink**) 11/03/2012, 18:07

Una pregunta Cristian, yo desmenucé el código en el css, y fui agregando atributos, de a uno, y el botón se ve cuadrado cuando le pongo el degradado, si el background es de un solo color, no se ve cuadrado, este es la forma en que aplico el degradado:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startC olorstr='#5c8ca7', endColorstr='#063b59')";

Ahora lo tengo en un solo color y se ve redondeado.
Con respecto a la ubicación del css, si lo tengo en la carpeta css, y también creo que puede haber un error en la ruta, por eso lo voy a pegar en el head, y después veo de sacarlo de ahí.
He probado degradados en div's con bordes redondeados, y se ven bien, en el IE tester, pero con el botón, he tenido estos inconvenientes.

Voy a hacer lo que me sugerís, y vos lo probaste con un degradado, o un solo color, saludos.

cristian_cena · #11 (**permalink**) 11/03/2012, 18:50

acabo de probar y si, cuando pones degradados las esquinas redondeadas no tapan el degradado, ni con overflow:hidden;
supongo que no queda otra que decidas entre uno de ellos.
Pudiendo dejar los dos y quitar uno en las versiones viejas usando modernizr

rw523252 · #12 (**permalink**) 11/03/2012, 20:38

Gracias Cristian, no conocía Modernizr, es realmente, muy bueno lo que ofrecen, empezaré a verlo para aplicarlo en mis proyectos, saludos!!