Question

I am try position a div using absolute positioning and it works fine in Safari and Firefox but fails in IE and I can’t figure out why. The code is this:

var tempX=123;
var tempY=456;
var commentnum=3;
var bodyelement = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'comment_text'+commentnum);
newdiv.setAttribute('style', 'text-align:center;z-index:10001;left:'+(tempX-23)+'px;top:'+(tempY-80)+'px;position:absolute;');
newdiv.innerHTML = commenthtml;
bodyelement.appendChild(newdiv);

The script is suppose to generate a div where the user clicks the mouse. But in IE it places the div to the left side and then stacks them on top of each other. Can anyone give me an idea why this is not working?

Answer 1

According to quirksmode, setAttribute can not be used to set the style attribute in IE.

http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html

Using setAttribute, you should be able to set any attribute on an element. It appears that in IE, trying to set the style attribute does not work.

Instead you may need to set the style properties individually:

newdiv.style.textAlign = 'center';
newdiv.style.zIndex = 10001;
newdiv.style.left = (tempX-23) + 'px';
newdiv.style.top = (tempY-80) + 'px';
newdiv.style.position = 'absolute';

---

EDIT:

It appears as though IE has a cssText property. I’m not sure about browser support, but perhaps you could test for it.

if( 'cssText' in newdiv.style ) {
    newdiv.style.cssText = 'text-align:center;z-index:10001;left:'+(tempX-23)+'px;top:'+(tempY-80)+'px;position:absolute;';
} else {
    newdiv.setAttribute('style', 'text-align:center;z-index:10001;left:'+(tempX-23)+'px;top:'+(tempY-80)+'px;position:absolute;');
}

Tested cssText in Chrome 10 and Firefox 3.6, and it works.

---

EDIT2:

It appears as though there’s wide support for that property on elem.style, so you may just want to use it instead of setAttribute().

newdiv.style.cssText = 'text-align:center;z-index:10001;left:'+(tempX-23)+'px;top:'+(tempY-80)+'px;position:absolute;';