I've got a little JavaScript problem. The code is working in Opera and Firefox browser but not in Internet Explorer 8. Does anybody know why?

function createbtn(object, inner) {
    var hover = document.createElement("div");
    hover.setAttribute("class", "myarea");
    if (inner) {
        hover.style.width = object.width - 16 + "px";
        hover.style.height = object.height - 16 + "px";
        hover.style.top = getposy(object) + "px";
        hover.style.left = getposx(object) + "px";
    } else {
        hover.style.width = object.width + "px";
        hover.style.height = object.height + "px";
        hover.style.top = getposy(object) - 8 + "px";
        hover.style.left = getposx(object) - 8 + "px";
    }
}

I'm just learning Javascript. Any feedback wele. Simon

I've got a little JavaScript problem. The code is working in Opera and Firefox browser but not in Internet Explorer 8. Does anybody know why?

function createbtn(object, inner) {
    var hover = document.createElement("div");
    hover.setAttribute("class", "myarea");
    if (inner) {
        hover.style.width = object.width - 16 + "px";
        hover.style.height = object.height - 16 + "px";
        hover.style.top = getposy(object) + "px";
        hover.style.left = getposx(object) + "px";
    } else {
        hover.style.width = object.width + "px";
        hover.style.height = object.height + "px";
        hover.style.top = getposy(object) - 8 + "px";
        hover.style.left = getposx(object) - 8 + "px";
    }
}

I'm just learning Javascript. Any feedback wele. Simon

• javascript
• internet-explorer-8

• what is getposx and getposy? – Naftali Commented Jun 29, 2011 at 20:18
• can you put ur full code in a jsfiddle demo? – Naftali Commented Jun 29, 2011 at 20:19
• If you use the developer tools (F12), you can check what rendering mode IE 8 is in. Can you post what it is? I'm suspecting it's in Quirks Mode. – user1385191 Commented Jun 29, 2011 at 20:20
• @Simon You should cache the hover.style object inside a variable (both to reduce redundancy and boost performance)... – Šime Vidas Commented Jun 29, 2011 at 20:20
• Check the return of you getposx, getposy, they probably are not returning a number – Ruan Mendes Commented Jun 29, 2011 at 20:21

2 Answers 2

If object.width is less than 16

hover.style.width = object.width - 16 + "px";

then this will produce a string with a negative sign at the front, which is illegal since widths have to be non-negative.

You can fix this by saying

hover.style.width = Math.max(object.width - 16, 0) + "px";

and similarly for height.

Many browsers ignore invalid content, but IE in certain modes is stricter, so you are probably just getting silent failure in the others.

I guess it has to do with hover.setAttribute("class", "myarea");. If IE 8 is running in IE 7 or lower Mode this won't work. Then you have to use hover.className = 'myarea' (supported by all browsers).

The sAttrName parameter requires the name of the desired content attribute and not the Document Object Model (DOM) attribute. For example, in IE8 mode, this method no longer requires sAttrName to be "className" when setting, getting, or removing a CLASS attribute. Earlier versions of Internet Explorer and Internet Explorer 8 in patibility mode still require sAttrName to specify the corresponding DOM property name.

http://msdn.microsoft./en-us/library/ms536739%28v=vs.85%29.aspx

Check the mode IE is running.