CSS3 en IE

#1 (**permalink**) 02/02/2012, 09:34

Buenas tardes,

tengo dos problemas en todas las versiones de IE al aplicar un par de propiedades css3:

- Al intentar aplicar bordes redondeados a un div me sale bien (aplico el archivo javascript .htc para IE) pero aunque ponga background-repeat:no-repeat; en las versiones de IE me repite el fondo.

#col_izquierda{
width:25%;
float:left;
padding:10% 1% 1% 1%;
margin:2% 1% 1% 1%;
border-radius:7px;*//*Opera*/ /*REDONDEAR*/
-moz-border-radius:7px;/*Firefox*/
-webkit-border-radius:7px;/*Safari y Chrome*/
behavior: url(../border-radius.htc);/*IE*/
border:solid 3px #341a09;
font:normal 0.7em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-align:justify;
background:#fff url(../imagenes/fondos/col_izquierda.jpg);
background-repeat:no-repeat;
background-position:left top;
}

- Al aplicar sombra con CSS3 a un div en las versiones del IE me aplica esa sombra al contenido en vez de a los bordes por la zona exterior.

#col_central{
width:32%;
float:left;
margin:2% auto;
padding:0 1.5%;
box-shadow:3px 3px 20px #000;/*Opera*/ /*SOMBRA*/
-moz-box-shadow:3px 3px 20px #000;/*Firefox*/
-webkit-box-shadow:3px 3px 16px #000;/*Safari y Chrome*/
filter: progid:DXImageTransform.Microsoft.Glow(color='#666 666', Strength=5);/*IE*/
}

¿Alguien me podría dar alguna solución? Llevo dándole vueltas y mirando pero no logro solucionarlo.

emprear · #2 (**permalink**) 02/02/2012, 22:37

Probablemente no estés usando la librería apropiada, usá
http://css3pie.com/
(que sirve tanto para border-radius, como para box-shadow y linear-gradient)
Ejemplo

Código HTML:

Ver original<!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>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
#col_izquierda{
 width:25%;
 float:left;
 padding:10% 1% 1% 1%;
 margin:2% 1% 1% 1%;
 border-radius:7px;*//*Opera*/ /*REDONDEAR*/
-moz-border-radius:7px;/*Firefox*/
-webkit-border-radius:7px;/*Safari y Chrome*/
 behavior: url(PIE.htc);/*IE*/
 border:solid 3px #341a09;
 font:normal 0.7em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 text-align:justify;
 background:#fff url(378.gif);
 background-repeat:no-repeat;
 background-position:left top;
 }
 
 #col_central{
 width:32%;
 height: 200px;
 float:left;
 margin:2% auto;
 padding:0 1.5%;
 background-color: #ccc;
 box-shadow:3px 3px 20px #000;/*Opera*/ /*SOMBRA*/
-moz-box-shadow:3px 3px 20px #000;/*Firefox*/
-webkit-box-shadow:3px 3px 16px #000;/*Safari y Chrome*/
behavior: url(PIE.htc);
 }
 
 
/*]]>*/
</style>
</head>
<body>
<div id="col_izquierda">
<!-- fix -->
</div>
 
<div id="col_central">
<!-- fix -->x
</div>
</body>
</html>

Saludos

#3 (**permalink**) 10/02/2012, 08:26

Pues no me repite el fondo pero no me redondea los bordes, en IE salen sin redondear.

emprear · #4 (**permalink**) 10/02/2012, 23:15

Seguramente algo mal estás haciendo
Demo:
http://foros.emprear.com/css/linear-gradient/coli.html

Saludos