Agregar elementos con DOM no funciona en IE

[Juanchooo]

Hola a todos, ya tenia un buen que no escribia a este foro para consultar, pero me surgio un problema con IE(clasico) que le he buscado y buscado y no he podido solucionar.

El problema es que cuando intendo agregar un elemento (DIV) mediante DOM, en IE no me lo pinta, sin embargo en firefox funciona a la perfeccion, igual ocurre si asigno un atributo "onclick" a un elemento existente, en firefox si se activa el evento y en IE no. A continuacion pongo un ejemplo:


en HTML tengo eso:

Código HTML:

<div id="contenedorDeDivs">
<div id="divDeMuestra"  style="width:10px;height:10px;visibility:hidden;"></div>
</div> 

y mediante DOM hago esto:

Código:

  var contenedor = document.getElementById('contenedorDeDivs'); 
  var muestra = document.getElementById('divDeMuestra');
  var nuevoDiv = muestra.cloneNode(true);
  nuevoDiv.setAttribute("id", "divNumero1" );
  
  var estilo = "left:50px;";
  estilo += "top:50px;";
  estilo += "width:100px;";
  estilo += "height:100px;";
  estilo += "background:#CCC;";
  estilo += "visibility:visible;";
  
  nuevoDiv.setAttribute("style", estilo);  
  contenedor.appendChild(nuevoDiv);

Alguna pista de lo que pueda estar pasando ??? como les comento, en Firefox si muestra el elemento agregado pero en IE no.

Nota: La version de IE es la 7.


desde ya muchas gracias!

[Panino5001]

En Explorer no funciona eso. Hay que agregar cada una de las propiedades css por separado:

Código PHP:

  nuevoDiv.style.width='100px';
nuevoDiv.style.height='100px';
//etc 
   

o usar className y referir a una clase css ya creada:

Código PHP:

  <style>
.algo{width:100px; height:100px;/*etc*/}
</style>
<script>
//...
nuevoDiv.className='algo';
//...
</script>