2

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)

8
  • 1
    Try setting the position:absolute first before you set the left, top, etc properties.
    – Spudley
    May 9, 2011 at 15:10
  • There is no need for the important. 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
    May 9, 2011 at 15:15
  • 1
    Unrelated, but consider a library: $('#test').css({left: 100, top: 50, margin: 0, position: 'absolute'}); May 9, 2011 at 15:16
  • 1
    @tftd Hm, the code looks OK. Could you provide a live demo of the issue? May 9, 2011 at 15:19

5 Answers 5

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

2
  • had same problem here. i use parseInt instead of Number function to force it to numeric Sep 30, 2013 at 5:39
  • best solution is to use element.style.cssText if you can replace the styles Aug 22, 2019 at 7:16
2

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

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

3
  • Can't happen. This div is supposed to move when you scroll the page. :)
    – tftd
    May 9, 2011 at 15:14
  • What do you mean "fixed" @epascarello ? As like setting a fixed position?
    – tftd
    May 9, 2011 at 15:19
  • @tftd: you can use css position: fixed so that it stays in the same position on your screen whilst scrolling. JavaScript isn't necessary.
    – Andy E
    May 9, 2011 at 15:31
2
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.

1
  • setting the style with .style = '...'; works in Waterfox (Firefox) but NOT in IE and Chrome :(. But this hint of using .style.cssText = '...'; does the trick. Superb!!! Jul 28, 2014 at 21:43
2
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.`

1
  • 1
    For what it's worth, this very answer (needing the "px") just solved a HUGE problem for me that I was having with a 3rd party library. It had a whole bunch of Javascript that put elements in weird positions in the page in recent IE versions (and all other browsers) but IE5 quirks mode worked a treat. I guess old IE6 and under works with or without px, but newer versions complain without the px. Anyway, long way of saying thanks for the answer! :P
    – Ian Yates
    Aug 7, 2013 at 7:49
1

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

1
  • It works just fine in Firefox. I've tested it with a couple of versions under Windows and Linux. Also works under Safari, Opera, Chrome. Anyway never mind it. I've removed it and still it's not working under IE :)
    – tftd
    May 9, 2011 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.