Redimensionnement étrange sous IE7

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Redimensionnement étrange sous IE7

electro86

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 :

<div id="container">
<div id="header">
<div id="banner">
<div id="vertical_menu">
<div id="category_menu">
<div id="cat_info" style="">
<div id="pagination">
<ul>
<li class="pagination_select">
<li class="pagination">
<div id="page" style="">
<ul>
<li>
<a>
<img src="picture/mini/img_6319.jpg" name="img_6319.jpg" style="height: 128px;"/>
</a>
</li>
<li>
</li>
</ul>
</div>
</div>

Et voila la code CSS :

Code :

/* Comportement par defaut de balises*/
html{
margin:0;
padding:0;
height:100%;
width:100%;
}
body{
margin:0;
padding:0;
height:100%;
width:100%;
background-color:#cdb1cb;
}
/* General */
#container {
position:absolute;
width:100%;
}
/*Haut de page */
#banner {
background:url("img/background_banner.png" ) repeat-x;
height:124px;
padding-left:10px;
}
/* Contenu */
#page {
margin-left:280px;
}
#pagination {
height:60px;
text-align:center;
margin-left:200px;
}
#pagination ul{
position:absolute;
left:50%;
margin-top:10px;
}
.pagination{
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px 10px 10px 0px;
border:2px solid gray;
padding:3px;
}
.pagination_select{
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px 10px 10px 0px;
border:2px solid black;
cursor:pointer;
padding:3px;
background-color:gray;
}
.pagination:hover{
border:2px solid black;
cursor:pointer;
background-color:gray;
}
#page li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:10px;
}
#page img {
border:3px solid #FFFFFF;
}
#page img:hover{
cursor:pointer;
border:3px solid #e01b1b;
background-color:#FFFFFF;
opacity:0.8;
}
.pagination_link{
margin-left:5px;
border:1px solid #C1C1C1;
}

Code javascript :

Code :

//on place les photos dans des elements LI
for(i = first_picture; i < first_picture + 20; i++){
if (data.pictures[i]) {
var li = document.createElement("li" );
var img_mini = document.createElement("img" );
//param de la miniature
img_mini.src = 'picture/mini/' + data.pictures[i].url;
img_mini.name = data.pictures[i].url;
img_mini.style.height = "128px";
img_mini.num = i;
if (data.pictures[i + 1]) {
img_mini.url_next = data.pictures[i + 1].url;
}
else {
img_mini.url_next = data.pictures[0].url;
}
var a = document.createElement("A" );
a.appendChild(img_mini);
img_mini.onclick = function(){
galleryClass.interfaces.display_picture(this.num);
var myhash = window.location.hash;
var mycat = myhash.substr(1,myhash.length);
//dhtmlHistory.add(mycat+this.num);
}
li.appendChild(a);
ul.appendChild(li);
$('page').appendChild(ul);
}

Voila ce qu'on doit obtenir, ET QUE L'ON OBTIENT UNE FOIS QU'ON FAIT UN REDIMMENSIONNEMENT DE LA FENÊTRE !

Voila l'affichage, qui déconne ...

Publicité

electro86

UP!

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

electro86

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

FORUM HardWare.fr

Programmation

HTML/CSS

Redimensionnement étrange sous IE7

Sujets relatifs
[Resolu ] Probleme CSS assez inexplicable : Espace blanc avec IE7	Redimensionnement de combo
[IE7] flash puis loadvars	problème de fond sous ie7 (encore un =P) [résolu]
POSITION: absolute et incompatibilité IE7	[Réglé] "_blank" sur nouvel onglet pour IE7 et Safari
[PHP] Gallerie : redimensionnement d'img > x*1100px	Probleme de mise en page differente sous IE7 et Firefox
Problème de lenteur d'un site sous IE7 et pas sur IE6, FF2, Safari ...	[CSS] [resolu] menu vertical déroulant en CSS sous FF et IE7
Plus de sujets relatifs à : Redimensionnement étrange sous IE7

Page générée en 0.084 secondes