Foros del Web » Creando para Internet » CSS »

¿-webkit-border-radius limitado?

Estas en el tema de ¿-webkit-border-radius limitado? en el foro de CSS en Foros del Web. En el diseño de mi página web, he estado usando los border-radius neutral, para -moz y para -webkit como siguen: #head{border-radius:4em;-moz-border-radius:4em;-webkit-border-radius:4em} De igual forma que ...
  #1 (permalink)  
Antiguo 12/06/2009, 00:25
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
¿-webkit-border-radius limitado?

En el diseño de mi página web, he estado usando los border-radius neutral, para -moz y para -webkit como siguen:

#head{border-radius:4em;-moz-border-radius:4em;-webkit-border-radius:4em}

De igual forma que para #menu (border-radius:4em), #footer (border-radius:4em 0 0 4em) y .block (border-radius:2em).

En Firefox se ven perfectamente, sin embargo, en Google Chrome solo funcionan en menu y box, y misteriosamente en Apple Safari solo funcionan en box.

Me preguntaba si alguno de ustedes sabrá si esta función tiene alguna especie de límite, o quizá tengan alguna idea de por qué no esté funcionando correctamente. Se agradece cualquier ayuda.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 12/06/2009, 08:55
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: ¿-webkit-border-radius limitado?

Hasta donde he visto no tiene límites, no tendría sentido, haciéndolo de esta manera:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. #cont1,#cont2,#cont3,#cont4,#cont5,#cont6{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:5px; border:1px solid #333; margin:10px auto; width:300px; height:100px;}
  7. </head>
  8.  
  9. <div id="cont1"></div>
  10. <div id="cont2"></div>
  11. <div id="cont3"></div>
  12. <div id="cont4"></div>
  13. <div id="cont5"></div>
  14. <div id="cont6"></div>
  15. </body>
  16. </html>

funciona correctamente, entonces el error es otro, puede ser de tipeo(tuyo), etiquetas abiertas...etc., por si acaso yo quitaría border-radius de las declaraciones ya que ninguno de los actuales lo va a soportar.

Una cosa más no he probado Safarí 4, aun no lo tengo.
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 10/07/2009, 01:07
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ¿-webkit-border-radius limitado?

Después de largo tiempo de dar vueltas al código encontré el (los) errores.

1. Mientras al poner un valor más alto del correcto en Firefox, este lo limita al mayor, en webkit se desaparece.

Mi detalle, ponía un border-radius de 4em a un divisor que solo podía tener un máximo de 3.7em. Mientras Fx me lo cambió y se veía redondo como originalmente lo deseaba, en webkit desaparecía por completo.

2. Webkit solo admite un valor para border-radius. Donde tenía border-radius:4em 0 0 4em; me desconocía por completo los valores. Tuve que cambiarlos a uno solo, aunque en dichos navegadores ya no conseguí el efecto preciso que deseaba.

Espero mi experiencia la sirva en el futuro a alguien más, gracias por el apoyo.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 10/07/2009, 08:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿-webkit-border-radius limitado?

Hola Daphyre
Grato encontrarte por aquí (aunque sea de tarde en tarde )

Creo que el malfuncionamiento puede venir del hecho que la has tratado como una propiedad shorthand, que no tengo muy claro si lo será o no. Creo que no.

¿Probaste a definir cada una de las esquinas por separadocuando son valores distintos?:
Cita:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Ya dirás.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 11/07/2009, 00:04
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ¿-webkit-border-radius limitado?

Vaya, no recordaba que weblit tenía sus radius de forma distinta en este caso. Gracias, probaré para ver si me funciona como espero
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #6 (permalink)  
Antiguo 12/07/2009, 18:53
Avatar de Kenichi  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 160
Antigüedad: 8 años, 11 meses
Puntos: 6
Respuesta: ¿-webkit-border-radius limitado?

Tambien un truco para que funcione en IE8, agrega al final de las propiedades -webkit- lo siguiente: behavior:url(border-radius.htc); y ya tienes bordes redondeados en IE8
__________________
Cansado de tener que hacer webs con doble login, o no entender nada del codigo de phpBB? Usa un sistema de foros simple, usa Linken Foros
  #7 (permalink)  
Antiguo 12/07/2009, 20:42
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ¿-webkit-border-radius limitado?

Kseso?, todo salió de maravilla, ahora mi página si se ve como esperaba ... Por lo menos en Mozilla y Webkit =P

Kenichi, ¿No necesito para eso un archivo extra?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 12/07/2009, 20:49
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: ¿-webkit-border-radius limitado?

Cita:
Iniciado por daPhyre Ver Mensaje
¿No necesito para eso un archivo extra?
efectivamente daPhyre, si lo necesitas, si no estoy mal su nombre es algo así :iepngfix.htc
__________________
WFC
codigo82
  #9 (permalink)  
Antiguo 12/07/2009, 20:51
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ¿-webkit-border-radius limitado?

El fix, claro, ya recuerdo haber leido de él .

Gracias
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:47.