Question

I have a class which is used to show correct message. This class works great in all browser, except I found error in Internet Explorer 8.

.success{
    border:#060 1px solid;
    margin-left:25%;
    margin-right:25%;
    padding:7px;
    background-color:#D9FF80;
    background-image:url(http://localhost/naju/home/css/css_img/ok.png);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:30px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#003300;
    font-weight:bold;
    -moz-border-radius:5px 5px 5px 5px;
    -moz-box-shadow:0 5px 3px #DDDDDD;
    -webkit-border-radius:5px 5px 5px 5px;
    behavior: url(border-radius.htc);
    }

As I’ve showed above, the class contains the external behavior (border-radius.HTC), this shows rounded border in internet explorer too. But my problem is that, If I keep the line:

behavior: url(border-radius.htc);

Internet explorer shows background repeat. But above I set background repeat: no-repeat. If I remove behavior, then it is fine. but this problem is only at Internet Explorer. I’ve no idea, why it is going so…How to stop the unexpected background repeat in internet explorer ? plz any help?

Contents of HTC file is below:

--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24

Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18


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

Answer 1

Your behaviour is causing the problem. These often try and redraw the element, so they’re based on very specific css properties and require fixed widths and heights.

Try using shorthand to declare your background, and if possible, set a fixed width and height on the element:

background: #D9FF80 url(http://localhost/naju/home/css/css_img/ok.png) top left no-repeat;

Or use CSS3 PIE, which supports many CSS3 properties: http://css3pie.com/