28172 sujets

CSS et mise en forme, CSS3

[Résolu]Crash d'IE7 dès l'ouverture de la page

Bonjour tout le monde,

J'ai un problème qui est assez bizarre car il apparait uniquement sous IE7 tandis que sous Firefox et Safari il n'y a pas de problèmes ...

Le site : http://soiree2.estevolution.fr/index2.php

En fait je soupçonne le cadre que j'ai fais qui a un css qui doit faire souffrir IE du fait de dupliquer les images des cadres : 

#fram-gen    { position:absolute; left :10%; top:10%;  width:80%; height:auto;  z-index:2; -moz-opacity:0.90; }
.contentFrame div.haut         { margin:0px;                                      background:url(Images/contenu/haut_gauche.png)  no-repeat scroll left   ;  width:100% ;  height:34px; 										}
.contentFrame div.haut h4      { margin:0px; margin-left:34px; margin-right:0px ; background:url(Images/contenu/haut_droite.png) no-repeat scroll right  ;                height:34px; 											}
.contentFrame div.haut span    { margin:0px; margin-left:0px ; margin-right:34px; background:transparent url(Images/contenu/haut.png) repeat-x          ;                height:34px;   display:block;      }

.contentFrame div.milieu       { margin:0px;                                      background:url(Images/contenu/gauche.png)  repeat-y scroll left ;  width:100% ;  height:100% ; 													 }
.contentFrame div.milieu-right { margin:0px; margin-left:34px; margin-right:0px;  background:url(Images/contenu/droite.png)  repeat-y scroll right;                 height:100% ; 	color:#CCCCCC;           }
.contentFrame div.milieu-princ { margin:0px; margin-left:0px ; margin-right:34px; background:url(Images/contenu/bg.png)                            ;               height:100% ; text-align:center;color:#FFFFFF;	       }

.contentFrame div.bas          { margin:0px;                                      background:url(Images/contenu/bas_gauche.png) no-repeat scroll left ; width:100% ;  height:34px ;	                    	}
.contentFrame div.bas h4       { margin:0px; margin-left:34px; margin-right:0px;  background:url(Images/contenu/bas_droite.png) no-repeat scroll right;               height:34px ;												  }
.contentFrame div.bas span     { margin:0px; margin-left:0px ; margin-right:34px; background:transparent url(Images/contenu/bas.png) repeat-x        ;               height:34px ;  display:block;          }

.content-title {color:#cc0000; font-size:20px; font-weight:bold; font-style:italic; line-height:32px; padding-left:10px;}


Je pense que la partie background:url(Images/contenu/droite.png) repeat-y scroll right; de chacun des style en soit la cause, mais pourquoi ? Est-ce IE7 qui est mal optimisé au niveau de la gestion des background, car quand je charge cette page le processeur est a 50% et coté de la mémoire ca grimpe en flèche ...

Est-ce que quelqu'un a déjà eu ce problème ? Et avez vous trouvez une solution ? Je vous remercie d'avance pour votre aide Smiley smile
Modifié par kiki57 (08 Oct 2008 - 23:56)
Modérateur
bonjour

Le probleme ne vient pas des valeurs de background , scroll est une valeur par défaut .

As tu essayé de changer le doctype de ta page pour html 4.01 strict , ou au moins d'ecrire le doctype au complet ?

a priori , Ie n'arrive pas a calculer les 100% de largeur que tu indique a certains enfant de div#fram-gen .

Tout d'abord , tu ne donne aucune largeur a html et body (en mode quirks , de toute façon ça sert pas a grand chose) .

Ensuite tu positionne en absolu un element en lui fixant 80% de largeur .Jusque la , IE arrive a gerer ça et applique 80% de la fenetre .

La ou ça déconne , c'est quand tu donne 100% aux enfants et comme IE est en mode quirks (ton doctype est invalide/incomplet) , Il devient impossible a IE de recalculer cette valeur , pas vraiment de reference , a part 80% estimé a la louche ,d'un element en dehors du flux et eventuellement des padding ici et la , la moulinette s'emballe et crash !

Essai d'abord de completer le doctype de ta page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Si ça tourne encore mal , ajoute un width:100%; a body.

sinon voir pour passer avec un doctype strict :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">


Je n'ai pas tester ces solutions ... , mais ça ne devrait faire que du bien Smiley smile .

GC
Bonsoir gcyrillus,

Merci beaucoup pour toute les explications que tu viens de m'apporter a ce sujet, car je ne connaissais pas les différents mode de fonctionnement suivant les IE & Cie et je ne me doutais absolument pas que le doctype était si important dans la page :o Donc maintenant je pense que ça va être une chose que je n'oublierai plus car ça me faisait tourner la tête depuis plusieurs jours Smiley smile

Encore merci pour ton aide.

Jonathan
Sujet clos
Aller à