Foros del Web » Creando para Internet » CSS »

border-radius en ie8

Estas en el tema de border-radius en ie8 en el foro de CSS en Foros del Web. hola he encontrado la solucion del border-radius en ie8 http://www.htmlremix.com/css/curved-...-cross-browser pero en firefox funciona bien pero en internet explorer me aplica un borde fina pueden ...
  #1 (permalink)  
Antiguo 21/07/2011, 14:18
Avatar de engonga  
Fecha de Ingreso: marzo-2002
Ubicación: Córdoba
Mensajes: 1.299
Antigüedad: 15 años
Puntos: 8
border-radius en ie8

hola he encontrado la solucion del border-radius en ie8

http://www.htmlremix.com/css/curved-...-cross-browser

pero en firefox funciona bien


pero en internet explorer me aplica un borde fina


pueden chequearlo en http://esigual.net/kita/

alguien sabe por qué?
__________________
joan blanch
  #2 (permalink)  
Antiguo 21/07/2011, 14:53
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: border-radius en ie8

en tu demo veo el border-radius, pero no veo ningún color para que se aprecie eso de "borde fino".
Si te interesas, yo uso
http://css3pie.com/

que permite no sólo aplicar "border-radius" sino otrs propiedades css3


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 21/07/2011, 14:58
Avatar de engonga  
Fecha de Ingreso: marzo-2002
Ubicación: Córdoba
Mensajes: 1.299
Antigüedad: 15 años
Puntos: 8
Respuesta: border-radius en ie8

se ve con internet explorer 8
__________________
joan blanch
  #4 (permalink)  
Antiguo 21/07/2011, 15:06
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: border-radius en ie8

eso es una pregunta?
Bueno, si lo es, en teoría si.
Yo ya no uso IE8, pero lo verifico utilizando las herramientas de desarrollo de IE9 (F12)

Fijate en esta demo que tengo colgada

http://foros.emprear.com/css3/PIE/PIE_demo.html
le estoy dando, box-shadow, gradient, y border -radius

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 21/07/2011, 16:15
Avatar de engonga  
Fecha de Ingreso: marzo-2002
Ubicación: Córdoba
Mensajes: 1.299
Antigüedad: 15 años
Puntos: 8
Respuesta: border-radius en ie8

Emprear voy a probar el pie

muchas gracias
__________________
joan blanch
  #6 (permalink)  
Antiguo 21/07/2011, 16:34
Avatar de engonga  
Fecha de Ingreso: marzo-2002
Ubicación: Córdoba
Mensajes: 1.299
Antigüedad: 15 años
Puntos: 8
Respuesta: border-radius en ie8

Muchas gracias Emprear me funciónó perfectamente

de verdad muchas gracias!!!
__________________
joan blanch
  #7 (permalink)  
Antiguo 08/08/2011, 12:43
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 6 años, 11 meses
Puntos: 6
Respuesta: border-radius en ie8

por qu a mi no me funcionaa en IE8?

Código CSS:
Ver original
  1. #footer1{
  2. position:relative;
  3. -webkit-border-radius: 20px 20px 0;
  4. -moz-border-radius: 20px 20px 0px 0px;
  5. border-radius: 20px 20px 0;
  6. left:0px;
  7. color:black;
  8. width:970px;
  9. height:102px;
  10. list-style: none;
  11. margin: 0px auto;
  12. background: #11a5c0; /* Old browsers */
  13. background: -moz-linear-gradient(top, #11a5c0 0%, #0f788c 100%); /* FF3.6+ */
  14. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#11a5c0), color-stop(100%,#0f788c)); /* Chrome,Safari4+ */
  15. background: -webkit-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* Chrome10+,Safari5.1+ */
  16. background: -o-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* Opera11.10+ */
  17. background: -ms-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* IE10+ */
  18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11a5c0', endColorstr='#0f788c',GradientType=0 ); /* IE6-9 */
  19. background: linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* W3C */
  20. behavior: url(PIE.htc);
  21. }
  #8 (permalink)  
Antiguo 08/08/2011, 15:36
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: border-radius en ie8

Bajá la demo
http://foros.emprear.com/css3/PIE/PIE_demo.html

el htc
http://foros.emprear.com/css3/PIE/PIE.htc

y probala

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 08/08/2011, 15:57
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 6 años, 11 meses
Puntos: 6
Respuesta: border-radius en ie8

Cita:
Iniciado por emprear Ver Mensaje
eso es lo que hago pero no funciona...


Código CSS:
Ver original
  1. #footer1{
  2. position:relative;
  3.  
  4. behavior: url(PIE.htc);
  5.  
  6. -webkit-border-radius: 20px;
  7. -moz-border-radius: 20px;
  8. border-radius: 20px;
  9. left:0px;
  10. color:black;
  11. width:970px;
  12. height:102px;
  13. list-style: none;
  14. margin: 0px auto;
  15. background: #11a5c0; /* Old browsers */
  16. background: -moz-linear-gradient(top, #11a5c0 0%, #0f788c 100%); /* FF3.6+ */
  17. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#11a5c0), color-stop(100%,#0f788c)); /* Chrome,Safari4+ */
  18. background: -webkit-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* Chrome10+,Safari5.1+ */
  19. background: -o-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* Opera11.10+ */
  20. background: -ms-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* IE10+ */
  21. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11a5c0', endColorstr='#0f788c',GradientType=0 ); /* IE6-9 */
  22. background: linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* W3C */
  23.  
  24.  
  25. }
  #10 (permalink)  
Antiguo 08/08/2011, 17:03
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: border-radius en ie8

Amigo, en tu código estás redondeando un borde

Código CSS:
Ver original
  1. webkit-border-radius: 20px 20px 0;
  2. -moz-border-radius: 20px 20px 0px 0px;
  3. border-radius: 20px 20px 0;

pero no hay ningún borde que redondear...
Código CSS:
Ver original
  1. border: solid 1px #000;


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 08/08/2011, 17:08
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 6 años, 11 meses
Puntos: 6
Respuesta: border-radius en ie8

Cita:
Iniciado por emprear Ver Mensaje
Amigo, en tu código estás redondeando un borde

Código CSS:
Ver original
  1. webkit-border-radius: 20px 20px 0;
  2. -moz-border-radius: 20px 20px 0px 0px;
  3. border-radius: 20px 20px 0;

pero no hay ningún borde que redondear...
Código CSS:
Ver original
  1. border: solid 1px #000;


Saludos

y por que en mozilla firefox si me hace los bordes redondeados ?
  #12 (permalink)  
Antiguo 08/08/2011, 17:47
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: border-radius en ie8

Estoy viendo tu código, y recien ahora me doy cuenta de un detalle,
tenes puesto
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11a5c0', endColorstr='#0f788c',GradientType=0 ); /* IE6-9 */
y eso hace que no trabaje adecuadamente, pra el gradient tenes que usar
-pie-background: linear-gradient(#EEFF99, #66EE33);

Resumiendo, para que funcionen en todas partes los tres efectos (radius, shadow, gradient) (+ PIE.htc para IE)


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. <title>PIE CSS3</title>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <style type="text/css">
  6. #footer1{
  7. position: relative;
  8. left:0px;
  9. color:black;
  10. width:970px;
  11. height:102px;
  12. margin: 0px auto;
  13. border: 1px solid #696;
  14. padding: 60px 0;
  15. text-align: center;
  16. -webkit-border-radius: 8px;
  17. -moz-border-radius: 8px;
  18. border-radius: 8px;
  19. -webkit-box-shadow: #666 4px 8px 3px;
  20. -moz-box-shadow: #666 4px 8px 3px;
  21. box-shadow: #666 4px 8px 3px;
  22. background: #EEFF99;
  23. background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
  24. background: -webkit-linear-gradient(#EEFF99, #66EE33);
  25. background: -moz-linear-gradient(#EEFF99, #66EE33);
  26. background: -ms-linear-gradient(#EEFF99, #66EE33);
  27. background: -o-linear-gradient(#EEFF99, #66EE33);
  28. background: linear-gradient(#EEFF99, #66EE33);
  29. -pie-background: linear-gradient(#EEFF99, #66EE33);
  30. behavior: url(PIE.htc);
  31. }
  32. </head>
  33. <div id="footer1">Footer 1</div>
  34. </body>
  35. </html>
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #13 (permalink)  
Antiguo 21/02/2012, 10:51
Avatar de engonga  
Fecha de Ingreso: marzo-2002
Ubicación: Córdoba
Mensajes: 1.299
Antigüedad: 15 años
Puntos: 8
Respuesta: border-radius en ie8

hola no se si es un bug en lo de pie pero tengo un problema

si uso pie asi

Código HTML:
<div id="cap">     
    
        <ul class="menu">
            <li><a href="servicios">SERVICIOS</a></li>
            <li><a href="alquiler">ALQUILER</a></li>
            <li><a href="venta">VENTA</a></li>
            <li><a href="emprendimientos">EMPRENDIMIENTOS</a></li>
            <li class="seleccionat">TASACIONES</li>
            <li><a href="contacto">CONTACTO</a></li>        
        </ul>

 </div> 
la class de .seleccionat es esta

Código HTML:
.seleccionat{ 
                    padding-left:25px;
                    border: 1px solid #696;
                    text-align: center; width: 200px;
                    -webkit-border-radius: 8px 8px 0 0;
                    -moz-border-radius: 8px 8px 0 0;
                    border-radius: 8px 8px 0 0;
                    background: #EEFF99;                    
                    behavior: url("./piecss/PIE.htc") !important;        
                }
pero si en id cap le pongo un fondo por ejemplo

Código HTML:
#cap{
    height:149px;
    background:#FFFFFF;
    border-bottom:#039 solid 1px;
}
no me funciona el piecss

he estado buscando en el foro de Pie y de momento no he encontrado nada!!!

si alguien se ha topado con este problema que me lo diga y lo investigamos juntos
__________________
joan blanch

Etiquetas: border-radius, firefox, ie8
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




La zona horaria es GMT -6. Ahora son las 08:00.