CSS problem, showing unexpected background repeat in Internet explorer

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-borde开发者_Python百科r-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>

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/

i think it has to do something with png. I had also unwanted repeatings. At first there were no problems. Then I made the image smaller and after that it really didn't matter what I did. It kept repeating :( When I changed the same image to a jpg or a gif it listened to the css settings. my 2 cents ...

The htc is just a javascript, so anyone with javascript knowledge can tinker around with it. You can edit it in any text editor.

The error lies in the htc, when assigning the background repeat, it always puts: fill.type='tile';

What I did was read the background-repeat property and assigned it to a variable, and then depending on the value of the variable, it set the background correctly:

find this line => var fillColor=this.currentStyle.backgroundColor; right beneath put:

var repeat=this.currentStyle.backgroundRepeat;

then find the broken line => fill.type='tile'; and replace it with:

if(repeat=='no-repeat')fill.type='Frame'; else fill.type='tile';

That's it!

Here's the complete code:

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

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 repeat=this.currentStyle.backgroundRepeat
var fillColor=this.currentStyle.backgroundColor;
var fillSrc=new String(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='Frame';
  if(repeat=='no-repeat')fill.type='Frame';
  else 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>