CODEWITHSUNDEEP
javascriptcross-browser
tftd
tftd

Reputation: 17042

IE javascript setting style.left not working

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

Upvotes: 2

Views: 21443

Answers (5)

Ferruccio
Ferruccio

Reputation: 31

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

Upvotes: 2

tftd
tftd

Reputation: 17042

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! :)

Upvotes: 5

kennebec
kennebec

Reputation: 104810

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.

Upvotes: 2

epascarello
epascarello

Reputation: 207527

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

Upvotes: 1

duri
duri

Reputation: 15351

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

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

Upvotes: 2

Related Questions