IE n'applique pas les styles a certaines div créées dynamiquement

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : IE n'applique pas les styles a certaines div créées dynamiquement

berzehk

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 :

Code :

<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>

avec, en code CSS:

Code :

.BoxContent{
background-color: #ffffcc;
}
.Box{
margin : 10px;
}
body {
background-color : #C2E678;
}
.BoxContainer {
background-color: #ffffcc;
}
.BoxLoadingPic{
margin : 0px;
padding : 0px;
display : inline;
vertical-align: top;
}
.BoxErrorPic{
margin : 0px;
padding : 0px;
display : inline;
vertical-align: top;
background-color: #ffffcc;
}
.BoxTop{
background-color: #ffffcc;
width: 100%;
}
.TopFiller{
vertical-align: top;
margin : 0px;
padding : 0px;
display : inline;
height : 15px;
}
.BottomFiller{
vertical-align: bottom;
margin : 0;
padding : 0;
display : inline;
height : 15px;
}
.BoxBottom{
background-color: #ffffcc;
width: 100%;
}
.BoxTopLeftCorner{
margin : 0;
padding : 0;
display : inline;
vertical-align: top;
}
.BoxTopRightCorner{
margin : 0px;
padding : 0px;
display : inline;
vertical-align: top;
}
.BoxBottomLeftCorner{
margin : 0px;
padding : 0px;
display : inline;
vertical-align: bottom;
}
.BoxBottomRightCorner{
margin : 0px;
padding : 0px;
display : inline;
vertical-align: bottom;
}

Maintenant, je demande a Javascript de créer la boite, avec le script suivant :

Code :

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";
}

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? :cry:

Publicité

anapajari

s/travail/glanding on hfr/gs;

remplace:

Code :

handler.setAttribute("class",className);

par

Code :

handler.className = className;

berzehk

je viens d'essayer, ca ne marche plus sous FF (mais ca c'est pas grave), par contre, sous IE, l'erreur devient : objet attendu a la ligne

Code :

<body onload="javascript:bodyOnLoadCallback()" >

anapajari

s/travail/glanding on hfr/gs;

Garanti le node.className fonctionne sur IE et FF.

Quelle est l'erreur dans la console de FF?
L'erreur sous IE laisse penser à un problème dans ton code.
Par ailleurs le "javascript:" est inutile dans les events.

berzehk

en fait j'suis tout honteux :$ ca marche. Mais y'a encore un probleme avec une des divs qui prend toute la largeur de la page, j'vais voir comment jdois regler ca
Merci bcp :hello:

Message édité par berzehk le 29-08-2006 à 11:43:00

berzehk

eeuh... en fait, je veux bien que tu me dises ce que je peux utiliser comme nodes sur IE, parce que le probleme se repose:
J'utilisais la fonction setAttribute pour appliquer
style="width : "+boxWidth
mais ca ne marche pas sous IE, ce qui me donne mon probleme de largeur..

T'as pas un site avec une reference complete par hasard? :$

anapajari

s/travail/glanding on hfr/gs;

C'est pas comme ça qu'on change le style d'un noeud

Code :

node.style.attribut = savaleur;

Dans ton cas:

Code :

node.style.width = boxWidth + 'px';

Et n'oublie pas l'unité c'est important.

Pour les correspondantes JS des propriétés CSS tu peux, par exemple, jeter un oeil la:
http://developer.mozilla.org/en/docs/DOM:CSS

Message cité 1 fois
Message édité par anapajari le 29-08-2006 à 12:03:55

gatsu35

Blablaté par Harko

anapajari a écrit :

C'est pas comme ça qu'on change le style d'un noeud

Code :

node.style.attribut = savaleur;

Dans ton cas:

Code :

node.style.width = boxWidth + 'px';

Et n'oublie pas l'unité c'est important.

Pour les correspondantes JS des propriétés CSS tu peux, par exemple, jeter un oeil la:
http://developer.mozilla.org/en/docs/DOM:CSS

On peut changer comme il fait mais faut passer par node.style.cssText

Message cité 1 fois

anapajari

s/travail/glanding on hfr/gs;

gatsu35 a écrit :

On peut changer comme il fait mais faut passer par node.style.cssText

Mais stfu n00b T'as lu mon post ou bien?

Et je vais citer la doc pour eclairer mon propos:
- http://developer.mozilla.org/en/docs/DOM:CSS

Citation :

In other words, the first of the following two constructions is bad, and the latter is better practice in the DOM:
bad
element.style = "background-color: blue";
good
element.style.backgroundColor = "blue";

- http://developer.mozilla.org/en/docs/style

Citation :

It is generally better to use the style property than elt.setAttribute('style', '...') from a script, since use of the style property will not overwrite other CSS properties that may be specified in the style attribute.

gatsu35

Blablaté par Harko

Je sais tout ça , mais fallait bien que je parle pour rien dire

FORUM HardWare.fr

Programmation

HTML/CSS

IE n'applique pas les styles a certaines div créées dynamiquement

Sujets relatifs
Probleme de styles	[Résolu] [C#.Net] Ecrire dynamiquement le contenu d'un <legend>
Utiliser les méthodes statiques dynamiquement	[Résolu] [C#.Net] Ecrire du texte dynamiquement dans une page .aspx
JApplet : Mettre à jour un panel dynamiquement	activer/desactiver des trigger dynamiquement
Avoir deux styles d'images différentes	Problème : le CSS ne s'applique pas à la page en HTML
[Fin] Gérer les évenements sur des boutons créés dynamiquement	gerer les ancres dynamiquement
Plus de sujets relatifs à : IE n'applique pas les styles a certaines div créées dynamiquement

Page générée en 0.101 secondes