Redimensionnement étrange sous IE7

Redimensionnement étrange sous IE7 - HTML/CSS - Programmation

Marsh Posté le 23-02-2008 à 17:05:41    

Bonjour,
 
Je suis en train de créer une galerie photos en AJAX mais voila, alors que tout fonctionne sous Firefox, presque bien sous IE6 j'ai un étrange problème sous IE7.
 
 
Voici, mon code HTML, (je l'ais alléger un max pour voir que l'essentiel donc ne vous inquiettez pas si des div sont pas fermées...), en dessous le code CSS et en dessous le javascript
Le principe de fonctionnement est le suivant:  
1/ On clique sur une catégorie dans le menu, ce qui déclenche un evenement Javascript
2/ Je récupère grace à de l'ajax une liste d'url de mes photos
3/ Grâce au DOM je met à jour ma div "page", en créant une liste <ul><li><a>Ma photos</a></li><ul>  
4/ Mon problème c'est que dés que je met à jour ma div "page" j'obtient un affichage horrible, tout ce met à gauche comme si j'avais mis une largeur de 300px...
5/ Le plus étrange c'est qu'une fois la div mis a jour, si je redimensionne ma fenêtre d'IE, tout s'affiche correctement d'un coup ...
 
J'espère avoir était le plus clair possible, regardai les screenshot pour vous faire une meilleur idée!
 
 

Code :
  1. <div id="container">
  2. <div id="header">
  3. <div id="banner">
  4. <div id="vertical_menu">
  5. <div id="category_menu">
  7. <div id="cat_info" style="">
  8. <div id="pagination">
  9. <ul>
  10. <li class="pagination_select">
  11. <li class="pagination">
  13. <div id="page" style="">
  14. <ul>
  15.     <li>
  16.      <a>
  17.      <img src="picture/mini/img_6319.jpg" name="img_6319.jpg" style="height: 128px;"/>
  18.       </a>
  19. </li>
  20.     <li>
  21.     </li>
  22. </ul>
  23. </div>
  24. </div>


 
Et voila la code CSS :  

Code :
  1. /* Comportement par defaut de balises*/
  3. html{
  4. margin:0;
  5. padding:0;
  6. height:100%;
  7. width:100%;
  8. }
  10. body{
  11. margin:0;
  12. padding:0;
  13. height:100%;
  14. width:100%;
  15. background-color:#cdb1cb;
  16. }
  20. /* General */
  21. #container {
  22. position:absolute;
  23. width:100%;
  24. }
  26. /*Haut de page */
  28. #banner {
  29. background:url("img/background_banner.png" ) repeat-x;
  30. height:124px;
  31. padding-left:10px;
  33. }
  35. /* Contenu */
  36. #page {
  37. margin-left:280px;
  38. }
  41. #pagination {
  42. height:60px;
  43. text-align:center;
  44. margin-left:200px;
  45. }
  47. #pagination ul{
  48. position:absolute;
  49. left:50%;
  50. margin-top:10px;
  51. }
  53. .pagination{
  54. float:left;
  55. list-style-image:none;
  56. list-style-position:outside;
  57. list-style-type:none;
  58. margin:0px 10px 10px 0px;
  59. border:2px solid gray;
  60. padding:3px;
  61. }
  63. .pagination_select{
  64. float:left;
  65. list-style-image:none;
  66. list-style-position:outside;
  67. list-style-type:none;
  68. margin:0px 10px 10px 0px;
  69. border:2px solid black;
  70. cursor:pointer;
  71. padding:3px;
  72. background-color:gray;
  73. }
  75. .pagination:hover{
  76. border:2px solid black;
  77. cursor:pointer;
  78. background-color:gray;
  79. }
  81. #page li {
  82. float:left;
  83. list-style-image:none;
  84. list-style-position:outside;
  85. list-style-type:none;
  86. margin:10px;
  87. }
  89. #page img {
  90. border:3px solid #FFFFFF;
  91. }
  94. #page img:hover{
  95. cursor:pointer;
  96. border:3px solid #e01b1b;
  97. background-color:#FFFFFF;
  98. opacity:0.8;
  99. }
  100. .pagination_link{
  101. margin-left:5px;
  102. border:1px solid #C1C1C1;
  103. }


 
 
Code javascript :  

Code :
  1. //on place les photos dans des elements LI
  2.   for(i = first_picture; i < first_picture + 20; i++){
  3.    if (data.pictures[i]) {
  4.     var li = document.createElement("li" );
  5.     var img_mini = document.createElement("img" );
  7.     //param de la miniature
  8.     img_mini.src = 'picture/mini/' + data.pictures[i].url;
  9.     img_mini.name = data.pictures[i].url;
  10.     img_mini.style.height = "128px";
  11.     img_mini.num = i;
  13.     if (data.pictures[i + 1]) {
  14.      img_mini.url_next = data.pictures[i + 1].url;
  15.     }
  16.     else {
  17.      img_mini.url_next = data.pictures[0].url;
  18.     }
  19.     var a = document.createElement("A" );
  21.     a.appendChild(img_mini);
  23.     img_mini.onclick = function(){
  24.      galleryClass.interfaces.display_picture(this.num);
  26.      var myhash = window.location.hash;
  27.      var mycat = myhash.substr(1,myhash.length);
  28.      //dhtmlHistory.add(mycat+this.num);
  29.     }
  32.     li.appendChild(a);
  34.     ul.appendChild(li);
  35.     $('page').appendChild(ul);
  36.    }


 
 
Voila ce qu'on doit obtenir, ET QUE L'ON OBTIENT UNE FOIS QU'ON FAIT UN REDIMMENSIONNEMENT DE LA FENÊTRE !
 
http://detiti.com/file/sans_probleme.png
 
Voila l'affichage, qui déconne ...
http://detiti.com/file/probleme.png

Reply

Marsh Posté le 23-02-2008 à 17:05:41   

Reply

Marsh Posté le 29-02-2008 à 20:20:57    

UP!


Message édité par electro86 le 25-03-2008 à 12:00:28
Reply

Marsh Posté le 25-03-2008 à 12:01:52    

Bon ça semble pas être parlant comme problème...?

Reply

Sujets relatifs:

Leave a Replay

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