Why is IE7 ignoring the css background?

Question

I am trying to add some div elements by using inject of mootools . Here is part of my code

  var elm = document.createElement('div');
  elm.setAttribute('id', 'leftHeader');
  elm.setAttribute('class', 'leftHeader');
  var div_before = document.getElementById('w1');
  var aux = div_before.parentNode;
  aux.insertBefore(elm, div_before);
  var elm2 = document.createElement('div');
  elm2.setAttribute('id', 'rightHeader');
  elm2.setAttribute('class', 'rightHeader');
  var div_before2 = document.getElementById('w1');
  aux2 = div_before2.parentNode;
  aux2.insertBefore(elm2, div_before2);

And the stylesheet for that as below

.leftHeader {
    background: #e64626 url("bgleft.png") 0 0 no-repeat;
    float: left;
    position: absolute;
    width: 40%;
    height: 358px;
}
.rightHeader {
    background: #e64626 url("bgright.png") right 0 no-repeat;
    float: right;
    position: absolute;
    width: 60%;
    left: 40%;
    height: 358px;
}

You will notice the background showing up in all browsers expect IE7 . :( I am not sure why. Can someone help me in figuring out why it fails to load the background in IE7? I have checked the console. Does not seem to show any error or warning either

AFter a bit of debugging realized that it is not loading the stylesheet in IE7. Wonder why?

Answer 1

Try setting elm2.className = 'rightHeader'; instead.