Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: Problemas redondeo de DIV con internet explorer

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 ago, 11
    Mensajes
    61
    Poder de Reputación
    16

    Problemas redondeo de DIV con internet explorer

    Tengo un problema con el codigo para redondear las esquinas de un "DIV":

    Se ve perfecto en todos los navegadores, pero para Internet Explorer deberia funcionar con el archivo border.htc. Y no consigo verlo

    Me podeis ayudar?

    Mando el código:

    Código HTML:

    1.<div id="ppal">texto de ejemplo </div>

    El codigo final CSS para todos los navegadores, en este caso es asi:

    #ppal {
    02.background-color: #F00;
    03.height: 200px;
    04.width: 200px;
    05.padding: 10px;
    06./*para Firefox*/
    07.-moz-border-radius: 15px 15px 15px 15px;
    08./*para Safari y Chrome*/
    09.-webkit-border-radius: 15px 15px 15px 15px;
    10./*para IE */
    11.behavior:url(border.htc);
    12./* para Opera */
    13.border-radius: 15px 15px 15px 15px;<strong></strong>
    14.}


    Archivo border.htc

    <public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
    <script type="text/javascript">

    // findPos() borrowed from http://www.quirksmode.org/js/findpos.html
    function findPos(obj) {
    var curleft = curtop = 0;

    if (obj.offsetParent) {
    do {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    }

    return({
    'x': curleft,
    'y': curtop
    });
    }

    function oncontentready(classID) {
    if (this.className.match(classID)) { return(false); }

    if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

    this.className = this.className.concat(' ', classID);
    var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
    this.currentStyle['-webkit-border-radius'] ||
    this.currentStyle['border-radius'] ||
    this.currentStyle['-khtml-border-radius']) /
    Math.min(this.offsetWidth, this.offsetHeight), 1);
    var fillColor = this.currentStyle.backgroundColor;
    var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
    var strokeColor = this.currentStyle.borderColor;
    var strokeWeight = parseInt(this.currentStyle.borderWidth);
    var stroked = 'true';
    if (isNaN(strokeWeight)) {
    strokeWeight = 0;
    strokeColor = fillColor;
    stroked = 'false';
    }

    this.style.background = 'transparent';
    this.style.borderColor = 'transparent';

    // Find which element provides position:relative for the target element (default to BODY)
    var el = this;
    var limit = 100, i = 0;
    while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
    el = el.parentElement;
    i++;
    if (i >= limit) { return(false); }
    }
    var el_zindex = parseInt(el.currentStyle.zIndex);
    if (isNaN(el_zindex)) { el_zindex = 0; }
    //alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

    var rect_size = {
    'width': this.offsetWidth - strokeWeight,
    'height': this.offsetHeight - strokeWeight
    };
    var el_pos = findPos(el);
    var this_pos = findPos(this);
    this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
    this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

    var rect = document.createElement('v:roundrect');
    rect.arcsize = arcSize +'px';
    rect.strokecolor = strokeColor;
    rect.strokeWeight = strokeWeight +'px';
    rect.stroked = stroked;
    rect.style.display = 'block';
    rect.style.position = 'absolute';
    rect.style.top = this_pos.y +'px';
    rect.style.left = this_pos.x +'px';
    rect.style.width = rect_size.width +'px';
    rect.style.height = rect_size.height +'px';
    rect.style.antialias = true;
    rect.style.zIndex = el_zindex - 1;

    var fill = document.createElement('v:fill');
    fill.color = fillColor;
    fill.src = fillSrc;
    fill.type = 'tile';

    rect.appendChild(fill);
    el.appendChild(rect);

    var css = el.document.createStyleSheet();
    css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
    css.addRule("v\\:fill", "behavior: url(#default#VML)");

    isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
    // IE6 doesn't support transparent borders, use padding to offset original element
    if (isIE6 && (strokeWeight > 0)) {
    this.style.borderStyle = 'none';
    this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
    this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
    }

    if (typeof(window.rounded_elements) == 'undefined') {
    window.rounded_elements = new Array();

    if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
    window.onresize = window_resize;
    }
    this.element.vml = rect;
    window.rounded_elements.push(this.element);
    }

    function window_resize() {
    if (typeof(window.rounded_elements) == 'undefined') { return(false); }

    for (var i in window.rounded_elements) {
    var el = window.rounded_elements[i];

    var strokeWeight = parseInt(el.currentStyle.borderWidth);
    if (isNaN(strokeWeight)) { strokeWeight = 0; }

    var parent_pos = findPos(el.vml.parentNode);
    var pos = findPos(el);
    pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
    pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;

    el.vml.style.top = pos.y +'px';
    el.vml.style.left = pos.x +'px';
    }

    if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
    }
    </script>

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    10 oct, 11
    Mensajes
    180
    Poder de Reputación
    16
    Joder que lío!
    Mira, yo no me dedico a internet explorer, pero te puedo brindar un código para hacer "más fácil" el redondeo de las cosas, se que no es lo que buscas, pero puede que achiques un poco el código!!

    Para firefox:

    Código:
    -moz-border-radius:5px 5px 80px 80px;
    <!-- (POR DEFECTO RADIO DE: ABAJO-IZQUIERDA, ABAJO-DERECHA, ARRIBA-IZQUIERDA, ARRIBA-DERECHA) -->
    Para chrome:

    Código:
    -webkit-border-radius: 15px 55px 5px 15px;
    Lo que quieras redondeado en css sería así:
    Código:
    .demo {
    -moz-border-radius:5px 5px 80px 80px;
    -webkit-border-radius: 15px 55px 5px;
    background-color:gray;
    font-weight:bold;
    font-family: Arial;
    padding:15px;
    display:inline;
    }
    Y en html:

    Código:
    <div class="demo">Aló aló</div>
    No responde a tu duda pero puede que te sirva!! :)

    Saludos!

    ---Update---

    Me equivoqué en el css, arreglado :)
    Última edición por _St; 25/11/2011 a las 15:08

  3. #3
    Administrador CCTW Webmaster de CCTWHabitante Avatar de Jorgens_CCTW
    Fecha de Ingreso
    30 ene, 11
    Ubicación
    Cartagena, Murcia, España.
    Mensajes
    1,097
    Poder de Reputación
    10
    Yo siempre he preferido colocar una imagen de fondo y ahorrame todo ese jaleo de código. Vago que es uno ;=)

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 ago, 11
    Mensajes
    61
    Poder de Reputación
    16
    Gracias _St, pero lo tengo solucionado: En definitiva lo que me has mandado es excatamente lo mismo que lo mio, pero que con la diferencia que lo mio funciona con internet explorer.

    Codigo correcto para TODOS LOS NAVEGADORES

    Código HTML:

    1.<div id="ppal">texto de ejemplo </div>

    El codigo final CSS para todos los navegadores, en este caso es asi:

    #ppal {
    02.background-color: #F00;
    03.height: 200px;
    04.width: 200px;
    05.padding: 10px;
    06./*para Firefox*/
    07.-moz-border-radius: 15px 15px 15px 15px;
    08./*para Safari y Chrome*/
    09.-webkit-border-radius: 15px 15px 15px 15px;
    10./*para IE */
    11.behavior:url(border.htc);
    12./* para Opera */
    13.border-radius: 15px 15px 15px 15px;<strong></strong>
    14.}


    Únicamente teneis que pegar el archivo "border.htc" en el directorio donde esta el archivo CSS. (codigo rosado)

    ES UNA SOLUCIÓN PERFECTA !!!

    SALUDOS.

  5. #5
    Recien Llegado! Habitante
    Fecha de Ingreso
    28 feb, 11
    Ubicación
    Venezuela
    Mensajes
    27
    Poder de Reputación
    17
    amigo deja de preocuparte por internet explorer. yo me preocupo porque se vea bien en Chrome y en firefox y ya, por internet explorer no voy con la intencion de que mi web se vea bonita voy con la interncion de que solo cuadre y las personas puedan navegar... de todos modos si ves las estdisticas a Internet explorer no le queda mucho tiempo de vida

Temas Similares

  1. Problemas con internet explorer
    Por siddel77 en el foro Todo sobre Estilos CSS
    Respuestas: 4
    Último Mensaje: 23/05/2011, 03:29
  2. problemas con internet explorer
    Por alex_92 en el foro Foro General
    Respuestas: 3
    Último Mensaje: 05/12/2008, 14:22
  3. problemas con internet explorer
    Por capi en el foro Foro General
    Respuestas: 1
    Último Mensaje: 05/07/2008, 16:00

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •