Hey,
I'm struggling setting a style attribute to a div that's created via javascript. The flow is:

1. The script loads
2. It creates a <div id="test">
3. It sets attribute style="top: 20px; left: 10px; margin: 0px; position: absolute;"

Everything works fine with all other browsers but when it es to IE things just don't work. How can I set those style attributes in IE ? So far with this code:

var div = document.getElementById('test');
div.style.left     = "10px";
div.style.top      = "20px";
div.style.margin   = "0px";
div.style.position = "absolute !important";

I was able to set top, margin and position. Style.left is out of the question.

What's the best approach when dealing with style attributes in all browsers ?

@IE not working version: 7,8. (haven't tried it under 6 and 9)

Hey,
I'm struggling setting a style attribute to a div that's created via javascript. The flow is:

1. The script loads
2. It creates a <div id="test">
3. It sets attribute style="top: 20px; left: 10px; margin: 0px; position: absolute;"

Everything works fine with all other browsers but when it es to IE things just don't work. How can I set those style attributes in IE ? So far with this code:

var div = document.getElementById('test');
div.style.left     = "10px";
div.style.top      = "20px";
div.style.margin   = "0px";
div.style.position = "absolute !important";

I was able to set top, margin and position. Style.left is out of the question.

What's the best approach when dealing with style attributes in all browsers ?

@IE not working version: 7,8. (haven't tried it under 6 and 9)

• javascript
• cross-browser

• 1 Try setting the position:absolute first before you set the left, top, etc properties. – Spudley Commented May 9, 2011 at 15:10
• There is no need for the important. – epascarello Commented May 9, 2011 at 15:11
• I tried setting position to be the first thing but still it doesn't work. Can all these attributes be a string and set them as div.setAttribute('style',myStyleString); ? – tftd Commented May 9, 2011 at 15:15
• 1 Unrelated, but consider a library: $('#test').css({left: 100, top: 50, margin: 0, position: 'absolute'}); – Šime Vidas Commented May 9, 2011 at 15:16
• 1 @tftd Hm, the code looks OK. Could you provide a live demo of the issue? – Šime Vidas Commented May 9, 2011 at 15:19

5 Answers 5

After a couple of hours debugging the code I finally managed to get it right. The problem was I had a variable that returned numeric. That variable was the base of some calculation and it was used when setting div.style.left. So the variable sometimes returned NaN which caused the pain. :) Thanks to everybody for the effort and the time spent trying to help! :)

What's the best approach when dealing with style attributes in all browsers?

Setting just div.className and moving all CSS to CSS file.

div.style.cssText="top: 20px; left: 10px; margin: 0px; position: absolute;"

remember that the div'es position is relative to its parent- some old IE's need the parent element position set to relative or absolute, depending on the doctype.

function MuoveOnClickPosition(YourDIVObject) {

//numeric variables.
tempX = event.clientX;
tempY = event.clientY;

// String variables
var X, Y ;
X = tempX + 'px'; 
Y = tempY + 'px'; 

document.getElementById(YourDIVObject).style.left = X;
document.getElementById(YourDIVObject).style.top = Y;
}

//Should work !.. sometimes IE needs 'XXXpx' in string format. It depend on DOC Type.`

The !important is killing the position absolute. Does not even work in Firefox. Tested on JSBIN