border-radius en ie8

[engonga]

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é?

[emprear]

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

[engonga]

se ve con internet explorer 8

[emprear]

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

[engonga]

Emprear voy a probar el pie

muchas gracias

[engonga]

Muchas gracias Emprear me funciónó perfectamente

de verdad muchas gracias!!!

[juan_14nob]

por qu a mi no me funcionaa en IE8?

Código CSS:

#footer1{
position:relative;
-webkit-border-radius: 20px 20px 0;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0;
left:0px;
color:black;
width:970px;
height:102px;
list-style: none;
margin: 0px auto; 
background: #11a5c0; /* Old browsers */
background: -moz-linear-gradient(top, #11a5c0 0%, #0f788c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#11a5c0), color-stop(100%,#0f788c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11a5c0', endColorstr='#0f788c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* W3C */
behavior: url(PIE.htc);
}
 

[emprear]

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

[juan_14nob]

Iniciado por emprear

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

eso es lo que hago pero no funciona...

Código CSS:

#footer1{
position:relative;
 
behavior: url(PIE.htc);
 
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
left:0px;
color:black;
width:970px;
height:102px;
list-style: none;
margin: 0px auto; 
background: #11a5c0; /* Old browsers */
background: -moz-linear-gradient(top, #11a5c0 0%, #0f788c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#11a5c0), color-stop(100%,#0f788c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11a5c0', endColorstr='#0f788c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* W3C */
 
 
}
 

[emprear]

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

Código CSS:

webkit-border-radius: 20px 20px 0;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0;
 

pero no hay ningún borde que redondear...

Código CSS:

border: solid 1px #000;
 

Saludos

[juan_14nob]

Iniciado por emprear

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

Código CSS:

webkit-border-radius: 20px 20px 0;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0;
 

pero no hay ningún borde que redondear...

Código CSS:

border: solid 1px #000;
 

Saludos

y por que en mozilla firefox si me hace los bordes redondeados ?

[emprear]

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PIE CSS3</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#footer1{
position: relative;
left:0px;
color:black;
width:970px;
height:102px;
margin: 0px auto;
border: 1px solid #696;
padding: 60px 0;
text-align: center; 
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 4px 8px 3px;
-moz-box-shadow: #666 4px 8px 3px;
box-shadow: #666 4px 8px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(PIE.htc);
}
</style>
</head>
<body>
<div id="footer1">Footer 1</div>
</body>
</html>
 

Saludos

[engonga]

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