border-radius.htc (rounded corners)

Would like to know if anyone has got the border-radius.htc (rounded corners) working in elgg

it's not a version issue I think the issue is related to how the stylesheet is put together...

calling the css.php from each version/mod folder

I'm looking into this myself and if i find an answer i'll share this...

I think this is really important to creating cross browser compatibility with the elgg platform

-- For those that don't know the border-radius.htc file allows rendering of rounded corners in IE 6+ although in fairness i'm not designing for IE 6 as it is in my opinion not something i care about anymore but the advantage of having rounded corners in IE  7 + 8 means we can design with more consistency and i'm a stickler for detail.

a little more detail:

the .htc file is used in css like this;

.your-div {

 

-webkit-border-radius: 4px; 

-moz-border-radius: 4px;

border-radius: 4px;

behavior: url(border-radius.htc);

}

replacing the url with; "url(<?php echo $vars['url']; ?>border-radius.htc);" does not work

the same as with; "url(<?php echo $vars['url']; ?>_css/border-radius.htc);"

the same as with; "url(../somemod/version/etc/border-radius.htc);"

usually the border-radius.htc is located in the same directory as the stylesheet (normally) 

using site http:// url does not work either! 

the files are here on google code:

 

http://code.google.com/p/curved-corner/downloads/list

if anyone can see of a reason please let us know on this page :)

  • IE7 and 8 still don't support it that I know of.

  • The .htc document is a VLM work around it works in all IE and opera browsers it's more of an implementation issue, with how elgg calls the stylesheet data through .js (i think) I've been developing for about 8 years but this is puzzling me somewhat :P

    i'll provide the plain text for the .htc file so you can see how it implements rounded corners in IE :) one sec!

  • <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>

     

  • I know there are some issues with Joomla too! but there are workarounds for this that don't effect load performance - i'm trying some tests now so if i succeed i will post a full tutorial on this with files and documentation :)

  • i've been looking to resolve this too.. did you find a solution?

    thanks