Redondear picos imagenes y que se vea en IE 7 Y 8

lopd · #1 (**permalink**) 17/01/2013, 07:07

Tengo un gran problema, por mas vueltas que lo doy no doy con ello. Alguien que me pueda ayudar.

Intento redondear los picos de unas fotos y lanzandolo desde el dreamweaver se ve en todos los navegadores. Pero lo subo a un servidor y no se ve.

Os dejo un ejemplo del código

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<title>Ejemplo</title>
</head>

<body>
<div class="ejemplo">

<img src="_MG_3481.jpg" />
</div>
</body>
</html>

y el css

@charset "utf-8";
/* CSS Document */

.ejemplo{

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
border-top-width: 7px;
border-right-width: 7px;
border-bottom-width: 7px;
border-left-width: 7px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #7A7A7A;
border-right-color: #8F8F8F;
border-bottom-color: #7A7A7A;
border-left-color: #8F8F8F;
position: relative;
height: 300px;
behavior: url(pie.htc);
}

pzin · #2 (**permalink**) 17/01/2013, 07:19

Cita:

Iniciado por lopd

Intento redondear los picos de unas fotos

En realidad estás intentando, y seguramente consiguiendo, redondear los picos —aka esquinas— de un div.

Para la imagen lo puedes hacer, pero tendrías que aplicar la clase .ejemplo a la imagen, no al div.

lopd · #3 (**permalink**) 17/01/2013, 08:44

He probado a poner la clase a la imagen y ocurre lo mismo, desde el dreamweaver la imagen sale con sus bordes y esquinas redondeadas pero cuando lo subo al servidor con ie7 e ie8 no.

Puede tener algo que ver el servidor?

pzin · #4 (**permalink**) 17/01/2013, 09:03

No me había percatado de lo de IE7 e IE8. Esos navegadores no tienen soporte para border-radius.

Puedes hacerlo mediante JavaScript sólo para IE7 e IE8. Aunque, yo no lo haría. Las esquinas redondeadas no afectan de forma drástica al diseño en la gran mayoría de los casos, y el uso de IE7 es muy bajo, y el de IE8, no es tan bajo pero tampoco muy alto y además, está bajando cada vez más.

Y para postear código, mejor usar highlight/code.

lopd · #5 (**permalink**) 17/01/2013, 09:09

Ya se que para ie7 ie8 no sirve, pero he leido en varios sitios que aplicandole
behavior:url(pie.htc), estos navegadores si lo leen. De hecho si lo lanzo desde el dreamweaver si aparecer las fotos con las esquinas redondeadas.

Y necesito hacerlo porque es la petición del cliente.

Dentro de este foro he leído algo parecido, en el que estaba el colaborador "Emprear"

pzin · #6 (**permalink**) 17/01/2013, 09:20

No he usado nunca CSS3Pie, así que no sabría decirte.

Pero seguro que aparece alguien que sepa, como emprear, que es un genio.

Y un poco de offtopic: una de las mayores mentiras del mundo es aquella que versa el cliente siempre tiene la razón. Al igual que un fontanero sabe mejor qué tubería poner o quitar, un desarrollador web sabe mejor qué cosa poner o no. Aunque entiendo también que haya mucho singermorning como cliente.