Foros del Web » Creando para Internet » CSS »

No redondear todos los bordes CSS para IE

Estas en el tema de No redondear todos los bordes CSS para IE en el foro de CSS en Foros del Web. Hola a [email protected] !! Estoy intentando arreglar para IE, la jodienda de los bordes redondeados... Para mozilla funciona perfectamente, incluso puedes elegir el borde a ...
  #1 (permalink)  
Antiguo 03/12/2009, 17:33
Avatar de Sophie_Madrid  
Fecha de Ingreso: agosto-2008
Mensajes: 237
Antigüedad: 9 años, 4 meses
Puntos: 5
No redondear todos los bordes CSS para IE

Hola a [email protected] !!

Estoy intentando arreglar para IE, la jodienda de los bordes redondeados...

Para mozilla funciona perfectamente, incluso puedes elegir el borde a redondear.

Pues bien he encontrado una solución para IE con el archivo border-ratius.htc, el problema es que esto te hace de toda la etiqueta div y yo quería simplemente de los bordes que yo elija.

No se si me he explicado bien.

Gracias por la ayuda.

Saludos.
  #2 (permalink)  
Antiguo 03/12/2009, 17:40
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: No redondear todos los bordes CSS para IE

Amiga, esto es CSS3.

las nuevas propiedades son solo para navegadores actualizados.

IE8 ni los coje, dicen que IE9 ya vendrá con CSS3.

PD: la única solución es que lo hagas con imágenes.

Saludos.

Última edición por PrendekZ; 03/12/2009 a las 17:47
  #3 (permalink)  
Antiguo 03/12/2009, 17:46
Avatar de Sophie_Madrid  
Fecha de Ingreso: agosto-2008
Mensajes: 237
Antigüedad: 9 años, 4 meses
Puntos: 5
Respuesta: No redondear todos los bordes CSS para IE

Cita:
Iniciado por PrendekZ Ver Mensaje
Amigo, esto es CSS3.

las nuevas propiedades son solo para navegadores actualizados.

IE8 ni los coje, dicen que IE9 ya vendrá con CSS3.

PD: la única solución es que lo hagas con imágenes.

Saludos.
Amiga para ser mas exactos ;)

Seguro que es la única?? :(

Muchas gracias de todas formas
  #4 (permalink)  
Antiguo 03/12/2009, 17:47
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: No redondear todos los bordes CSS para IE

podes utilizar esto que anda diez puntos!

Código CSS:
Ver original
  1. div.servicesoffered {position: relative;width: 28em;background:#f5f5f5;margin: 10px 0 40px 0;}
  2.  
  3. div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner {position: absolute;width: 20px;height: 20px;background-color: #fff;overflow: hidden;z-index: 0;}
  4. div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position: relative;font-size: 150px;font-family: arial;color: #f5f5f5;line-height: 40px;z-index: 0;}
  5.  
  6. div.top-left-corner { top: 0px; left: 0px; }
  7. div.bottom-left-corner {bottom: 0px; left: 0px;}
  8. div.top-right-corner {top: 0px; right: 0px;}
  9. div.bottom-right-corner {bottom: 0px; right: 0px;}
  10. div.top-left-inside {left: -8px;}
  11. div.bottom-left-inside {left: -8px; top: -17px;}
  12. div.top-right-inside {left: -25px;}
  13. div.bottom-right-inside {left: -25px; top: -17px;}

y el HTML:
Código html:
Ver original
  1. <!-- Rounded Div -->
  2.             <div class="comunbox">
  3.               <div class="top-left-corner"><div class="comuntop-left-inside">&bull;</div></div>
  4.               <div class="bottom-left-corner"><div class="comunbottom-left-inside">&bull;</div></div>
  5.               <div class="top-right-corner"><div class="comuntop-right-inside">&bull;</div></div>
  6.               <div class="bottom-right-corner"><div class="comunbottom-right-inside">&bull;</div></div>
  7.                 <div class="box-comuncontent">
  8.                 <h3>titulo</h3>
  9.                 <p>info</a></p>
  10.               </div>
  11.             </div>
  12.           <!-- Ends Rounded Div -->

espero te sirva!
  #5 (permalink)  
Antiguo 03/12/2009, 17:48
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: No redondear todos los bordes CSS para IE

oh! perdón, no me fijo mucho en los nombres, solo entro a colaborar :$

y si creo que es la única forma.. puede deprónto hacerse con Javascript pero no se... yo siempre uso igual -moz-border-radius, de igual forma en IE no se puede ver, Cuidate y saludos.

Cualquier cosa escribeme y te ayudaré.
  #6 (permalink)  
Antiguo 06/12/2009, 09:38
 
Fecha de Ingreso: diciembre-2009
Mensajes: 56
Antigüedad: 8 años
Puntos: 0
Respuesta: No redondear todos los bordes CSS para IE

Cita:
Iniciado por DragonX Ver Mensaje
podes utilizar esto que anda diez puntos!

Código CSS:
Ver original
  1. div.servicesoffered {position: relative;width: 28em;background:#f5f5f5;margin: 10px 0 40px 0;}
  2.  
  3. div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner {position: absolute;width: 20px;height: 20px;background-color: #fff;overflow: hidden;z-index: 0;}
  4. div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position: relative;font-size: 150px;font-family: arial;color: #f5f5f5;line-height: 40px;z-index: 0;}
  5.  
  6. div.top-left-corner { top: 0px; left: 0px; }
  7. div.bottom-left-corner {bottom: 0px; left: 0px;}
  8. div.top-right-corner {top: 0px; right: 0px;}
  9. div.bottom-right-corner {bottom: 0px; right: 0px;}
  10. div.top-left-inside {left: -8px;}
  11. div.bottom-left-inside {left: -8px; top: -17px;}
  12. div.top-right-inside {left: -25px;}
  13. div.bottom-right-inside {left: -25px; top: -17px;}

y el HTML:
Código html:
Ver original
  1. <!-- Rounded Div -->
  2.             <div class="comunbox">
  3.               <div class="top-left-corner"><div class="comuntop-left-inside">&bull;</div></div>
  4.               <div class="bottom-left-corner"><div class="comunbottom-left-inside">&bull;</div></div>
  5.               <div class="top-right-corner"><div class="comuntop-right-inside">&bull;</div></div>
  6.               <div class="bottom-right-corner"><div class="comunbottom-right-inside">&bull;</div></div>
  7.                 <div class="box-comuncontent">
  8.                 <h3>titulo</h3>
  9.                 <p>info</a></p>
  10.               </div>
  11.             </div>
  12.           <!-- Ends Rounded Div -->

espero te sirva!
Amigo Dragon gracias por el código, lo he probado, me había echo bolas porque no veia que funcionaba, hasta que le puse color a la etiqueta H3 y voala , el tema es que el borde no sale redondeado sale cuadrado que podria hacer entonces?

gracias

Última edición por Marrselo; 06/12/2009 a las 09:42 Razón: aclaracion
  #7 (permalink)  
Antiguo 06/12/2009, 14:42
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: No redondear todos los bordes CSS para IE

Hola:

Creo que el fallo en el código de DragonX está aquí:

Código:
<!-- Rounded Div -->
<div class="comunbox">
<div class="top-left-corner"><div class="comuntop-left-inside">&bull;</div></div>
<div class="bottom-left-corner"><div class="comunbottom-left-inside">&bull;</div></div>
<div class="top-right-corner"><div class="comuntop-right-inside">&bull;</div></div>
<div class="bottom-right-corner"><div class="comunbottom-right-inside">&bull;</div></div>
<div class="box-comuncontent">
<h3>titulo</h3>
<p>info</a></p>
</div>
</div>
<!-- Ends Rounded Div -->
pero mejor que lo confirme el autor.

Saludos.

  #8 (permalink)  
Antiguo 08/12/2009, 17:11
 
Fecha de Ingreso: diciembre-2009
Mensajes: 56
Antigüedad: 8 años
Puntos: 0
Respuesta: No redondear todos los bordes CSS para IE

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Creo que el fallo en el código de DragonX está aquí:

Código:
<!-- Rounded Div -->
<div class="comunbox">
<div class="top-left-corner"><div class="comuntop-left-inside">&bull;</div></div>
<div class="bottom-left-corner"><div class="comunbottom-left-inside">&bull;</div></div>
<div class="top-right-corner"><div class="comuntop-right-inside">&bull;</div></div>
<div class="bottom-right-corner"><div class="comunbottom-right-inside">&bull;</div></div>
<div class="box-comuncontent">
<h3>titulo</h3>
<p>info</a></p>
</div>
</div>
<!-- Ends Rounded Div -->
pero mejor que lo confirme el autor.

Saludos.

gracias por tu respuesta chekare ese codigo
  #9 (permalink)  
Antiguo 09/12/2009, 08:39
Avatar de Sophie_Madrid  
Fecha de Ingreso: agosto-2008
Mensajes: 237
Antigüedad: 9 años, 4 meses
Puntos: 5
Respuesta: No redondear todos los bordes CSS para IE

Yo no he conseguido que funciones... alguna sugerencia mas?

Saludos.
  #10 (permalink)  
Antiguo 09/12/2009, 17:12
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: No redondear todos los bordes CSS para IE

Hola:

Yo he hecho estas modificaciones:

Código HTML:
Ver original
  1. <!-- Rounded Div -->
  2. <div class="comunbox">
  3. <div class="top-left-corner"><div class="top-left-inside">&bull;</div></div>
  4. <div class="bottom-left-corner"><div class="bottom-left-inside">&bull;</div></div>
  5. <div class="top-right-corner"><div class="top-right-inside">&bull;</div></div>
  6. <div class="bottom-right-corner"><div class="bottom-right-inside">&bull;</div></div>
  7. <div class="box-comuncontent"><h3>titulo</h3><p>info</p></div>
  8. </div>
  9. <!-- Ends Rounded Div -->

El CSS lo he dejado como estaba salvo esta línea que he cambiado el color:

Código CSS:
Ver original
  1. div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position: relative; font-size: 150px; font-family: arial; color: #ff0000; line-height: 40px; z-index: 0;}

Deberías ver unas esquinas redondeadas en las esquinas del navegador.

Saludos.

  #11 (permalink)  
Antiguo 10/12/2009, 04:20
Avatar de Sophie_Madrid  
Fecha de Ingreso: agosto-2008
Mensajes: 237
Antigüedad: 9 años, 4 meses
Puntos: 5
Respuesta: No redondear todos los bordes CSS para IE

Muchas gracias jomaruro, ya consigo ver las esquinas del explorador redondeadas ;)

Ahora el más dificil todavía, ¿se le puede poner un borde de otro color a esas esquinas.

Tachannnnnnn !!!

Mil gracias !!! ;)

Besos
  #12 (permalink)  
Antiguo 10/12/2009, 17:44
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: No redondear todos los bordes CSS para IE

Hola:

En la línea que te indiqué antes:

Código:
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position: relative; font-size: 150px; font-family: arial; color: #ff0000; line-height: 40px; z-index: 0;}
Sólo tienes que poner el color que quieras (donde te lo marco en azul)

Saludos.

  #13 (permalink)  
Antiguo 15/12/2009, 13:09
 
Fecha de Ingreso: diciembre-2009
Mensajes: 56
Antigüedad: 8 años
Puntos: 0
Respuesta: No redondear todos los bordes CSS para IE

FUNCIONA ! HASTA CON IE6 y no tiene javascript, acabo de ver la luz gracias
  #14 (permalink)  
Antiguo 15/12/2009, 15:57
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: No redondear todos los bordes CSS para IE

Hola:

De nada Marrselo, a mandar.

Saludos.

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:25.