Box HTML + CSS

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]





loading

error



Box créée statiquement.






[/html]

avec, en code CSS:

[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.Containe
r.CSSclass,null,boxHandler);
return result;
}

function createBoxTop(boxIdParam,boxHandler,styleParam)
{
var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Top.id,styleParam.Box.Top.CSSclass,s
tyleParam.Box.Top.content,boxHandler);
return result;
}

function createBoxContent(boxIdParam,contentParam,boxHandler,styleParam)
{
var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Content.id,styleParam.Box.Content.CS
Sclass,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.CSSc
lass,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

“+
" <form name=“authentication_form” action=”" method="" onsubmit=“return false;”>"+
“<input type=“text” name=“id_field” value=“ID” width=“45” />
”+
“<input type=“password” name=“password_field” value=“password” width=“45” />

”+
“<input type=“submit” value=“OK” name=“send_button” onClick=”"+this.LoginSubmitFunction+"" />";
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? B)

Salut,

je pense que j’ai déjà eu le même problème avec IE: il faut utiliser l’attribut className au lieu de class pour modifier dynamiquement la classe d’un élément avec IE.