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

IE n'applique pas les styles a certaines div créées dynamiquement - HTML/CSS - Programmation

Marsh Posté le 29-08-2006 à 09:23:06    

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 :
  1. <div id="testBox" class="Box"  style="width: 200px;">
  2. <div id="testBox_container" class="BoxContainer">
  3.  <div id="testBox_top" class="BoxTop">
  4.   <img src="./img/tl.gif" class="BoxTopLeftCorner" width="15 px" height="15 px" />
  5.   <img src="./img/ajax-loader.gif" class="BoxLoadingPic" alt="loading" width="15 px" height="15 px" />
  6.   <img src="./img/filler.gif" width="124 px" class="TopFiller" />
  7.   <img src="./img/errorPic.gif" class="BoxErrorPic" alt="error" width="15 px" height="15 px" />
  8.   <img src="./img/tr.gif" class="BoxTopRightCorner" width="15 px" height="15 px" />
  9.  </div>
  10.  <div  style="width: 200px;" id="testBox_content" class="BoxContent">
  11.   Box créée statiquement.
  12.  </div>
  13.  <div id="testBox_bottom" class="BoxBottom">
  14.   <img src="./img/bl.gif" class="BoxBottomLeftCorner" width="15 px" height="15 px" />
  15.   <img src="./img/filler.gif" width="162 px" class="BottomFiller" />
  16.   <img src="./img/br.gif" class="BoxBottomRightCorner" width="15 px" height="15 px" />
  17.  </div>
  18. </div>
  19. </div>


 
avec, en code CSS:

Code :
  1. .BoxContent{
  2.   background-color: #ffffcc;
  3. }
  5. .Box{
  6. margin : 10px;
  7. }
  9. body {
  10. background-color : #C2E678;
  11. }
  13. .BoxContainer {
  14.   background-color: #ffffcc;
  15. }
  17. .BoxLoadingPic{
  18. margin : 0px;
  19. padding : 0px;
  20. display : inline;
  21. vertical-align: top;
  22. }
  24. .BoxErrorPic{
  25. margin : 0px;
  26. padding : 0px;
  27. display : inline;
  28. vertical-align: top;
  29. background-color: #ffffcc;
  30. }
  32. .BoxTop{
  33. background-color: #ffffcc;
  34. width: 100%;
  35. }
  37. .TopFiller{
  38. vertical-align: top;
  39. margin : 0px;
  40. padding : 0px;
  41. display : inline;
  42. height : 15px;
  43. }
  45. .BottomFiller{
  46. vertical-align: bottom;
  47. margin : 0;
  48. padding : 0;
  49. display : inline;
  50. height : 15px;
  51. }
  53. .BoxBottom{
  54. background-color: #ffffcc;
  55. width: 100%;
  56. }
  58. .BoxTopLeftCorner{
  59. margin : 0;
  60. padding : 0;
  61. display : inline;
  62. vertical-align: top;
  63. }
  65. .BoxTopRightCorner{
  66. margin : 0px;
  67. padding : 0px;
  68. display : inline;
  69. vertical-align: top;
  70. }
  72. .BoxBottomLeftCorner{
  73. margin : 0px;
  74. padding : 0px;
  75. display : inline;
  76. vertical-align: bottom;
  77. }
  79. .BoxBottomRightCorner{
  80. margin : 0px;
  81. padding : 0px;
  82. display : inline;
  83. vertical-align: bottom;
  84. }


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

Code :
  1. function bodyOnLoadCallback()
  2. {
  4.  var Param = new Param1("200" );
  5. var root = document.getElementsByTagName("body" )[0];
  6. var doc = creerDiv("doc","doc",null);
  7. placerDiv(doc,root);
  8. var loginBox = createDivPart("loginBox","box créée dynamiquement.",doc,Param);
  9. }
  11. function creerDiv(idName,className,content)
  12. {
  13. var handler = document.createElement("div" );
  14. if (idName != null)
  15.             handler.setAttribute("id",idName);
  16. if (className != null)
  17.             handler.setAttribute("class",className);
  18.     if (content != null)
  19.             handler.innerHTML = content;
  20. return handler;
  21. }
  23. function createAndPlaceDiv(idName,className,content,target)
  24. {
  25. var res = creerDiv(idName,className,content);
  26. placerDiv(res,target);
  27. return res;
  28. }
  30. function placerDiv(handler, target)
  31. {
  32. target.appendChild(handler);
  33. }
  35. function createDivPart(boxId,content,root,style)
  36. {
  37. //   handler                  (id,class,content)  
  38. var boxHndlr = creerDiv(boxId,style.Box.CSSclass,null);
  39. //      (handler,target)
  40. boxHndlr.setAttribute("style","width: "+style.width+"px ;" );
  41. placerDiv(boxHndlr,root);
  42. //container
  43. boxHndlr.container = createBoxContainer(boxId,boxHndlr,style);
  44. //top
  45. boxHndlr.container.top = createBoxTop(boxId,boxHndlr.container,style);
  46. //content
  47. boxHndlr.container.content = createBoxContent(boxId,content,boxHndlr.container,style);
  48. //bottom
  49. boxHndlr.container.bottom = createBoxBottom(boxId,boxHndlr.container,style);
  51. return boxHndlr;
  52. }
  54. /* crée le container avec les parametres standards de class et id  */
  55. function createBoxContainer(boxIdParam,boxHandler,styleParam)
  56. {
  57. var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Container.id,styleParam.Box.Container.CSSclass,null,boxHandler);
  58. return result;
  59. }
  61. function createBoxTop(boxIdParam,boxHandler,styleParam)
  62. {
  63. var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Top.id,styleParam.Box.Top.CSSclass,styleParam.Box.Top.content,boxHandler);
  64. return result;
  65. }
  67. function createBoxContent(boxIdParam,contentParam,boxHandler,styleParam)
  68. {
  69. var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Content.id,styleParam.Box.Content.CSSclass,contentParam,boxHandler);
  70. result.setAttribute("style","width : "+styleParam.width+"px ;" );
  71. return result;
  72. }
  74. function createBoxBottom(boxIdParam,boxHandler,styleParam)
  75. {
  76. var result = createAndPlaceDiv(boxIdParam+styleParam.Box.Bottom.id,styleParam.Box.Bottom.CSSclass,styleParam.Box.Bottom.content,boxHandler);
  77. return result;
  78. }
  82. function Param1(widthZ)
  83. {
  84. this.width = widthZ;
  85. this.Box = new Box1(widthZ);
  86. this.Text = new Text1();
  87. }
  89. function Text1()
  90. {
  91. this.LoginSubmitFunction = "java script:login()";
  92. this.LoginTitle = "Login";
  93. this.Logincontent = "<img src=\"iconeCle.jpg\" alt=\"\" width=\"15\" height=\"15\" /> Login <br /> <br />"+
  94.                       "   <form name=\"authentication_form\"  action=\"\" method=\"\" onsubmit=\"return false;\">"+
  95.        "<input type=\"text\" name=\"id_field\" value=\"ID\" width=\"45\" /><br />"+
  96.        "<input type=\"password\" name=\"password_field\" value=\"password\" width=\"45\" /><br /><br />"+
  97.        "<input type=\"submit\" value=\"OK\" name=\"send_button\" onClick=\""+this.LoginSubmitFunction+"\" /></form>";
  98. this.LoginErrorText = "Erreur : code ";
  99. }
  103. function Box1(widthY)
  104. {
  105. this.CSSclass="Box";
  106. this.Container = new Container1();
  107. this.Content = new Content1();
  108. this.Top = new Top1(widthY);
  109. this.Bottom = new Bottom1(widthY);
  110. }
  113. function Bottom1(widthX)
  114. {
  115. this.CSSclass = "BoxBottom";
  116. this.id = "_bottom";
  117. 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\" />"
  118. }
  120. function Top1(widthX)
  121. {
  122. this.CSSclass = "BoxTop";
  123. this.id = "_top";
  124. 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\" />";
  125. }
  127. function Content1()
  128. {
  129. this.CSSclass = "BoxContent";
  130. this.id = "_content";
  131. }
  133. function Container1()
  134. {
  135. this.CSSclass = "BoxContainer";
  136. this.id = "_container";
  137. }


 
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..
 
http://www.cafzone.net/ipb/index.php?act=Attach&type=post&id=1016
 
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:

Reply

Marsh Posté le 29-08-2006 à 09:23:06   

Reply

Marsh Posté le 29-08-2006 à 09:28:07    

remplace:

Code :
  1. handler.setAttribute("class",className);


par

Code :
  1. handler.className = className;

Reply

Marsh Posté le 29-08-2006 à 10:09:01    

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 :
  1. <body onload="javascript:bodyOnLoadCallback()" >

Reply

Marsh Posté le 29-08-2006 à 10:49:09    

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.

Reply

Marsh Posté le 29-08-2006 à 11:42:45    

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
Reply

Marsh Posté le 29-08-2006 à 11:54:59    

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

Reply

Marsh Posté le 29-08-2006 à 12:01:25    

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

Code :
  1. node.style.attribut = savaleur;


Dans ton cas:

Code :
  1. 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
Reply

Marsh Posté le 29-08-2006 à 12:04:51    

anapajari a écrit :

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

Code :
  1. node.style.attribut = savaleur;


Dans ton cas:

Code :
  1. 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 :o changer comme il fait mais faut passer par node.style.cssText :o

Message cité 1 fois
Reply

Marsh Posté le 29-08-2006 à 12:09:04    

gatsu35 a écrit :

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


Mais stfu n00b :o 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.

Reply

Marsh Posté le 29-08-2006 à 12:35:28    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed