Problème de lenteur sous IE7

Hello tlm,

J'ai quelques problèmes avec mon site que je suis en train de développer.



Le premier est que mon site réagit rapidement sous Firefox et Safari, par contre, sous IE7 (vista et XP) j'ai des gros problèmes de lenteur.

Par exemple quand je redimentionne la fenêtre du navigateur, le processus iexplore.exe prends 100% du processeur pendant quelques secondes. La meme phénomène se produit quand j'approche un lien, " la main " apparait quelques seonces après. Ca vient pas de mon PC, j'ai testé mon site sur plusieurs machines et ça fait la meme chose...

Deuxième problème, j'ai placé un footer en bas de page, il arrive que quand les div centraux sont grands, le footer les recouvre. Et lorsque je redimentionne la fenêtre le footer reste à sa place initiale et redescent pas en bas du navigateur ..

Le code de mon footer

.footer {
	/* Emplacement */
	left: 25%;
    position: absolute;
    width: auto;
    bottom: 0;
	/* Centrer */
	margin-left: auto;
	margin-right: auto;

	/* Police */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	background-image: url(img/bg_translucide.png);
}

Merci de votre précieuse aide
Modifié par Redjos (27 Feb 2008 - 18:08)

Bonjour,

Pour les problèmes de positionnement du pied de page, tu peux suivre le modèle suivant:
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

Par contre pour que ça marche il faudra corriger pas mal de problèmes d'intégration. À cause de problèmes tel que notamment le dépassement des flottants tu as des conteneurs qui n'englobent pas tout leur contenu par exemple (je parle de l'en-tête ou de div.wrapper).

Dépassement des flottants:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Pour le problème de lenteur avec IE7, est-ce que tu peux le supprimer en supprimant tel ou tel style (par exemple certaines images de fond avec transparence)? Ça permettrait déjà d'identifier le problème.

Bonjour Florent!

Merci pr ton aide. Oui en effet, c'était les png en arrière plan qui faisait laggé IE! Je vais trouver une solution alternative à ça!

Quant aux div, si j'ai bien compris le lien que tu m'as donné, l'attribut float:right/left pose problème lorsqu'on se trouve dans un div parent. J'ai donc enlevé ce attribut, le footer est bien en bas de page (cool!) mais maintenant les deux colonnes du milieu se retrouve à la suite alors que je les voudrai cote à cote.. Tu sais pourquoi ?

Si tu trouves d'autres erreurs grossières, n'hésites pas à me les signaler.. Je débute en CSS. Car je suis de la vieille école qui consistait à tout faire avec des tableaux html



Le code CSS

/* style principal */
body {
	margin: 0 0px;
	margin-top:20px;
	background-image: url(img/bg1.jpg);
	background-repeat: repeat-x;
	/* Police par défaut */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;

}
/* Utiliser pour les titres */
h1 {
	margin: 0 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 42px;
	font-variant: small-caps;
}

/* Pour les liens hypertextes par défaut */
a {
	text-decoration: underline;
	color: #FFFFFF;	
}

/* Cadre central "squelette" */
.wrapper {
	position:relative;
	
	width: 775px; 
	height:100%;
	margin-left: auto;
	margin-right: auto;
}

/* Cadre principale à gauche */
.gauche {
	position:relative;
	/*float:left;*/
	
	width: 370px; 

	text-align:left;
	background-image: url(img/bg_translucide.png);
}

/* Cadre principale à droite */
.droite {
	position:relative;
	/*float:right;*/

	width: 370px;

	text-align:left;
	background-image: url(img/bg_translucide.png);
}

/* Menu en haut */
.menu {
	position:relative;
	padding:10px;
	background:#FFFFFF;
	text-align:center;
}
/* Proprieté de la police */
.menu a {	
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}
/* L'enveloppe à cellules */
.menu ul {
	margin-top:-3px;
	margin-left:20%;
	text-align: center;
}
/* Cellules */
.menu li {
	float:left;
	height:50px;
	width:20%;
	display:block;
}
/* Sélecteur qui s'affiche quand la souris passe dessus */
.menu li:hover {
	background-image:url(img/selecteur.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

/* Footer */

.footer {
	/* Emplacement */
    position: relative;
    width: auto;
    bottom: 0;
	/* Centrer */
	/*margin-left: auto;*/
	/*margin-right: auto;*/

	/* Police */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	background-image: url(img/bg_translucide.png);
}

/* Décoration de la police des liens */
.footer a {
	text-decoration: none;
	color: #FFFFFF;
}

Redjos a écrit :
Quant aux div, si j'ai bien compris le lien que tu m'as donné, l'attribut float:right/left pose problème lorsqu'on se trouve dans un div parent. J'ai donc enlevé ce attribut, le footer est bien en bas de page (cool!) mais maintenant les deux colonnes du milieu se retrouve à la suite alors que je les voudrai cote à cote.. Tu sais pourquoi ?

Ben oui, tu utilisais le positionnement flottant pour placer les deux blocs côte-à-côte. Si tu l'enlèves, ça ne marche plus, ce qui est assez logique.

Il faut garder le positionnement flottant, mais empêcher le dépassement des flottants.
Si tu relis le lien que j'ai donné plus haut, tu verras qu'il existe plusieurs solutions pour cela.