Border-Radius en Opera 11.5 e IE 9

Anndresorozco · #1 (**permalink**) 07/08/2011, 01:07

Hola Amigos como siempre cuando necesito ayuda vengo a ustedes. Bueno el tema es este.

Tengo un codigo CSS3 para redondear los bordes de una imagen se supone que todos los navegadores mas importantes (Firefox, Chrome, Safari, Opera, Internet Explorer) en sus ultimas actualizaciones ya soportan esto sin ningun problema como antes que tocaba usar "-moz-border-radius y -webkit-border-radius", bueno la cosa es que tengo este codigo CSS

Código:

    .b_rounded{
    border-radius: 100px;
}

y este HTML

Código:

<img class="b_rounded" src="Demi_60.jpg">

asi me funciona en Firefox, Chrome y Safari pero mas no en Opera e Internet Explorer (Inservible Explorer como me gusta llamarlo

) y segun se estos dos ultimos ya soportan este estandar sin ningun problema, (segun dice en las paginas oficiales de los mismo) Todos los navegadores que uso estan actualizados en sus ultimas versiones entonces no se que pasa, por favor siganme si es que estoy cometiendo algun error... enserio parece como si se me hubiese olvidado todo lo que se de css.

Por favor estos no es una emergencia pero de verdad que me estoy rompiendo la cabeza

pensando que es lo que esta mal pero no se asi que por favor traten de ayudarme lo mas rapido posible antes de que muera loco.

Muchas gracias de antemano por su ayuda.

dukeblass · #2 (**permalink**) 07/08/2011, 04:56

Código CSS:

Ver original-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;

Pues lo e probado y me funciona perfectamente en IE9

te dejo esta web para que generes código CSS3 si problemas:
http://css3generator.com/

-----------------------

Cita:

Navegador -> BORDER-RADIUS

Opera -> 10.5+
IE -> 9+
firefox -> 3+
Chrome -> 4+
safari -> 3.1+

Anndresorozco · #3 (**permalink**) 07/08/2011, 12:26

Que ya lo intente eso fue lo primero que hice y no funciona por eso vine aqui... esperando a que alguien de de alguna solucion y no diga lo obvio...

perdon pero es que realmente esto me esta volviendo loco no se si son mis navegadores o que por que de verdad todos estan actualizados... Firefox 4, Opera 11.5, Internet Explorer 9, Chrome 13, Safari 5... por favor de verdad no saben que puede pasar?

dukeblass · #4 (**permalink**) 07/08/2011, 12:59

Cita:

Iniciado por Anndresorozco

Que ya lo intente eso fue lo primero que hice y no funciona por eso vine aqui... esperando a que alguien de de alguna solucion y no diga lo obvio...

perdon pero es que realmente esto me esta volviendo loco no se si son mis navegadores o que por que de verdad todos estan actualizados... Firefox 4, Opera 11.5, Internet Explorer 9, Chrome 13, Safari 5... por favor de verdad no saben que puede pasar?

el problema los ves en la web completa o as separado y imagen y el CSS en una hoja de pruebas..

si no es asi as esto
crea una nueva hoja html y coloca esto..

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>pruebas</title>
.b_rounded{
    border-radius: 100px;
}
</head>
 
<body>
<img class="b_rounded" src="Demi_60.jpg">
</body>
</html>

si esto no te da problemas es que el código que tienes interfiere con el borde pero si te da problemas..

si seria raro..

Anndresorozco · #5 (**permalink**) 07/08/2011, 17:50

Es que asi como dices es como exactmente lo tengo... todo esta en un mismo documento asi exactamente

Código HTML:

Ver original<!-- CSS3 Border Rounded Test -->
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Border Rounded Test</title>
<style type="text/css">
.b_rounded{
    border-radius: 100px;
}
</style>
</head>
<body>
<p>This is a test</p>
<img class="b_rounded" src="Demi_60.jpg">
</html>

Entonces eso es lo que se me hace muy raro... creo que tendre que probarlo en otra PC para asegurarme de que no sea la mia la que tenga el error.

Pero gracias de todos modos

Tedel · #6 (**permalink**) 08/08/2011, 09:41

Antes que sigas, pregúntate esto: ¿Quieres redondear la imagen o su borde?

Opera no va a alterar tu imagen Demi_60.jpg por más que el CSS lo ordene. Opera es el navegador más "respetuoso" que hay.

Quizá lo que debas hacer es simplemente darle un borde a la imagen...

img {padding: 25px; background-color: #ffcccc}

...y luego intentar darle un borde al marco (y no a la foto) con border-radius.

Anndresorozco · #7 (**permalink**) 08/08/2011, 12:27

Okay de todos modos muchas gracias