Bonjour =)
 
Voila, j'aimerais comprendre s'il s'agit d'une erreur de ma part ou si c'est un bug.
Je suis en train de créer un modèle de box pour un site web. Ce modele marche parfaitement sur FF, mais sous IE, seules les boites créées statiquement -  i.e. dont le code etait deja dans la page HTML - s'affichent correctement.
 
voila le code source d'une box créée statiquement :
[html]<div id="testBox" class="Box"  style="width: 200px;">
 <div id="testBox_container" class="BoxContainer">
  <div id="testBox_top" class="BoxTop">
   <img src="./img/tl.gif" class="BoxTopLeftCorner" width="15 px" height="15 px" />
   <img src="./img/ajax-loader.gif" class="BoxLoadingPic" alt="loading" width="15 px" height="15 px" />
   <img src="./img/filler.gif" width="124 px" class="TopFiller" />
   <img src="./img/errorPic.gif" class="BoxErrorPic" alt="error" width="15 px" height="15 px" />
   <img src="./img/tr.gif" class="BoxTopRightCorner" width="15 px" height="15 px" />
  </div>
  <div  style="width: 200px;" id="testBox_content" class="BoxContent">
   Box créée statiquement.
  </div>
  <div id="testBox_bottom" class="BoxBottom">
   <img src="./img/bl.gif" class="BoxBottomLeftCorner" width="15 px" height="15 px" />
   <img src="./img/filler.gif" width="162 px" class="BottomFiller" />
   <img src="./img/br.gif" class="BoxBottomRightCorner" width="15 px" height="15 px" />
  </div>
 </div>
</div>[/html]
 
avec, en code CSS:

 
Maintenant, je demande a Javascript de créer la boite, avec le script suivant :
[codebox]
function bodyOnLoadCallback()
{
 
  var Param = new Param1("200" );
 var root = document.getElementsByTagName("body" )[0];
 var doc = creerDiv("doc","doc",null);
 placerDiv(doc,root);
 var loginBox = createDivPart("loginBox","box créée dynamiquement.",doc,Param);  
}
 
function creerDiv(idName,className,content)
{
 var handler = document.createElement("div" );
 if (idName != null)
            handler.setAttribute("id",idName);
 if (className != null)
            handler.setAttribute("class",className);
    if (content != null)
            handler.innerHTML = content;
 return handler;
}
 
function createAndPlaceDiv(idName,className,content,target)
{
 var res = creerDiv(idName,className,content);
 placerDiv(res,target);
 return res;
}
 
function placerDiv(handler, target)
{
 target.appendChild(handler);
}
 
function createDivPart(boxId,content,root,style)
{
 //   handler                  (id,class,content)  
 var boxHndlr = creerDiv(boxId,style.Box.CSSclass,null);
 //      (handler,target)
 boxHndlr.setAttribute("style","width: "+style.width+"px ;" );
 placerDiv(boxHndlr,root);
 //container
 boxHndlr.container = createBoxContainer(boxId,boxHndlr,style);
 //top
 boxHndlr.container.top = createBoxTop(boxId,boxHndlr.container,style);
 //content
 boxHndlr.container.content = createBoxContent(boxId,content,boxHndlr.container,style);
 //bottom
 boxHndlr.container.bottom = createBoxBottom(boxId,boxHndlr.container,style);
 
 return boxHndlr;
}
 
/* crée le container avec les parametres standards de class et id  */
function createBoxContainer(boxIdParam,boxHandler,styleParam)
{
 var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Container.id,styleParam.Box.Container.CSSclass,null,boxHandler);
 return result;
}
 
function createBoxTop(boxIdParam,boxHandler,styleParam)
{
 var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Top.id,styleParam.Box.Top.CSSclass,styleParam.Box.Top.content,boxHandler);
 return result;
}
 
function createBoxContent(boxIdParam,contentParam,boxHandler,styleParam)  
{
 var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Content.id,styleParam.Box.Content.CSSclass,contentParam,boxHandler);
 result.setAttribute("style","width : "+styleParam.width+"px ;" );
 return result;
}  
 
function createBoxBottom(boxIdParam,boxHandler,styleParam)
{
 var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Bottom.id,styleParam.Box.Bottom.CSSclass,styleParam.Box.Bottom.content,boxHandler);
 return result;
}
 
 
 
function Param1(widthZ)
{
this.width = widthZ;
this.Box = new Box1(widthZ);
this.Text = new Text1();
}
 
function Text1()
{
this.LoginSubmitFunction = "java script:login()";
this.LoginTitle = "Login";
this.Logincontent = "<img src=\"iconeCle.jpg\" alt=\"\" width=\"15\" height=\"15\" /> Login <br /> <br />"+
                       "   <form name=\"authentication_form\"  action=\"\" method=\"\" onsubmit=\"return false;\">"+
        "<input type=\"text\" name=\"id_field\" value=\"ID\" width=\"45\" /><br />"+
        "<input type=\"password\" name=\"password_field\" value=\"password\" width=\"45\" /><br /><br />"+
        "<input type=\"submit\" value=\"OK\" name=\"send_button\" onClick=\""+this.LoginSubmitFunction+"\" /></form>";
this.LoginErrorText = "Erreur : code ";
}
 
 
 
function Box1(widthY)
{
 this.CSSclass="Box";
 this.Container = new Container1();
 this.Content = new Content1();
 this.Top = new Top1(widthY);
 this.Bottom = new Bottom1(widthY);
}
 
 
function Bottom1(widthX)
{
 this.CSSclass = "BoxBottom";
 this.id = "_bottom";
 this.content = "<img src=\"./img/bl.gif\" class=\"BoxBottomLeftCorner\" width=\"15 px\" height=\"15 px\" /><img src=\"./img/filler.gif\" height=\"15px\" width=\""+(widthX-30)+" px\" class=\"BottomFiller\" /><img src=\"./img/br.gif\" class=\"BoxBottomRightCorner\" width=\"15 px\" height=\"15 px\" />"
}
 
function Top1(widthX)
{
 this.CSSclass = "BoxTop";
 this.id = "_top";
 this.content = "<img src=\"./img/tl.gif\" class=\"BoxTopLeftCorner\" width=\"15 px\" height=\"15 px\" /><img src=\"./img/ajax-loader.gif\" class=\"BoxLoadingPic\" alt=\"loading\" width=\"15 px\" height=\"15 px\" /><img src=\"./img/filler.gif\" width=\""+(widthX-60)+" px\" class=\"TopFiller\" /><img src=\"./img/errorPic.gif\" class=\"BoxErrorPic\" alt=\"error\" width=\"15 px\" height=\"15 px\" /><img src=\"./img/tr.gif\" class=\"BoxTopRightCorner\" width=\"15 px\" height=\"15 px\" />";
}
 
function Content1()
{
 this.CSSclass = "BoxContent";
 this.id = "_content";
}
 
function Container1()
{
 this.CSSclass = "BoxContainer";
 this.id = "_container";
}
[/codebox]
 
Pour la petite explication du code, il a un objet param qui en fait décrit quasiment tout le code HTML de la box et les fonctions autour se contentent d'ajouter ce code dans la page.
Ce code ne renvoie aucune erreur sur la console javascript de FF, et IE ne renvoie aucune erreur.
Et pourtant, le resultat n'est pas a la hauteur sur IE..
 

 
En fait, les divs de classe BoxContainer et BoxContent devraient avoir un background-color, mais il disparait. Et je n'arrive pas a svoir pourquoi. J'ai essayé de rajouter le code "style="background-color" directement dans la balise divv en utilisant la fonction setAttribute(), mais ca ne change  rien...
 
Des Idées?