Page qui "s'allonge" sous ie ?

Bonjour à tous,

J'ai refait le css de mes fiches produits que vous pourrez par exemple voir ici

Plusieurs petits points qui m'intriguent:

1/ sous ie (version 6 chez moi):
J'ai l'impression que lorsqu'on passe de page en page (bouton suivant sur la fiche produit), il y a un bug d'affichage (furtif) sous ie: au chargement de la page, la page "s'allonge" puis reprend ensuite sa taille normale... vous le constatez aussi ?

2/ Quand j'agrandis beaucoup la taille de la police, le design reste à peu près en place, sauf ma colonne de gauche qui masque une partie de mon footer. Savez-vous comment y remedier ?

3/ Enfin j'utilise JQuery et Thickbox pour générer mes agrandissements.
Cela engendre des erreurs de vaildation de la ccs thibox.css, comment montré ici

Bon j'avoue que ce qui me dérange le plus c'est la page qui s'allonge et rétrécit pour reprendre la bonne taille sous ie

Merci pour vos conseils

Voici ma CSS

*{
padding:0;
border:0;
margin:0;
}

body {
background:url(../images/background.gif) repeat-y center top;
font-family:Geneva, Arial, Tahoma, sans-serif;
font-size: 85%;
}

#page {
position:relative;
width: 770px;
margin:10px auto; 
border:1px solid #6C3089;
background-color:#FFF;
}

/*********************************
Header
*********************************/

#header {
height: 67px;
}

h1#top {
position: absolute;
text-indent: -5000px;
line-height: 1px;
font-size: 1px;
}

#logo {
padding-top:5px;
padding-left:5px;
}

#titrehaut {
margin-left:15px;
}

#langue{
position:absolute;
top:25px;
right:20px;
background-color:white;
}

#langue *{
float:left;
color:#666;
}

#langue h4{
margin-right: 3px;
font-size:0.8em;
font-weight:normal;
}
#langue p{
font-size:0.8em;
}
#langue ul{
list-style-type:none;
}

#langue li{
margin-right: 3px;
}

#langue a{
text-decoration:none;
font-size:0.8em;
}

#langue a:hover {
color:#6C3089;
text-decoration:underline;
}

#langue #english{
padding-right:3px;
border-right:1px solid #666;
}

#langue a:focus,#langue a:active{
text-decoration:underline;
color:#999;
}

/*********************************
Menu haut
*********************************/

#haut{
width:770px;
height:1.5em;
margin-top:.3em;
line-height:1.5em;
background-color:#8E6784;
border-top:1px solid #6C3089;
border-bottom:1px solid #6C3089;
}

#menuhaut li{
float:left;
list-style-type:none;
background-color:#8E6784;
}

#menuhaut a{
display:block;
padding:0 8px;
color:#FFF;
font-size:0.7em;
letter-spacing:2px;
text-decoration:none;
text-align:center;
}

#menuhaut a#active{
background-color:white;
color:#6C3089;
}

/*********************************
Gauche
*********************************/

#gauche {
position: absolute;
left:0;
width: 120px;
background-color:#E9E0E7;
margin: 37px 0 0 5px;
padding: 0 10px 0 0px;
}
#gauche h2 {
font-size:0.9em;
padding-left:5px;
padding-top:10px;
color:#6C3089;
}
#gauche p {
font-size:0.8em;
padding-left:5px;
padding-top:5px;
padding-bottom:10px;
color:#666;
}

#gauche a {
text-decoration:underline;
color:#666;
}

/*********************************
Centre
*********************************/

#centre {
margin-left: 180px;
}

p#breadcrumb{
margin-top:8px;
font-size:0.8em;
color:#666;
}

#breadcrumb a{
color:#666;
text-decoration:none;
}

#breadcrumb a:hover{
text-decoration:underline;
color:#6C3089;
}

#breadcrumb a:active,#breadcrumb a:focus{
text-decoration:underline;
color:#999;
}

#a_parure{
margin-top:15px;
display:block;
text-decoration:none;
color:#666;
font-size:0.8em;
text-align:center;
width:180px;
float:left;
}
#a_parure img {
display:block;
}
#descriptif {
float:left;
color:#666;
margin-left:30px;
width:380px;
}
#descriptif a{
color:#666;
text-decoration:underline;
}
h3{
padding-top:15px;
padding-bottom:5px;
font-size:1em;
color:#6C3089;
}
h4{
font-size:0.9em;
padding-top:5px;
font-weight:normal;
padding-bottom:8px;
}
#descriptif p{
font-size:0.8em;
padding-bottom:10px;
}
h5 {
background:url(../images/puce-fp.gif) no-repeat bottom left;
padding-left:20px;
font-weight:bold;
font-size:0.8em;

}
#nav_modele {
float:right;
margin-top:10px;
padding-right:35px;
font-size:0.8em;
color:#666;
}
#nav_modele a{
color:#6C3089;
text-decoration:none;
}
#nav_modele a:hover{
text-decoration:underline;
color:#6C3089;
}
#barre {
margin-top:-0.5em;
float:left;
width:550px;
height:1em;
background-color: #FFFFFF;
border-bottom:1px solid #DDDDDD;
}
#elements li{
float:left;
text-align:center;
margin-right:20px;
list-style-type:none;
padding-bottom:20px;
}

#elements span{
display:block;
}

#elements a{
margin-top:20px;
display:block;
text-decoration:none;
color:#666;
font-size:0.8em;
text-align:center;
width:90px;
float:left;
}
#elements img {
display:block;
}

/*********************************
Pied
*********************************/

#pied {
clear:both;
color:#666;
font-size:0.7em;
text-align:center;
}

#pied p {
margin:0;
padding:0;
}

et la CSS de la thickbox

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

html, body {
min-height: 100%;
height: 100%
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font-family:Geneva, Arial, Tahoma, sans-serif;
font-size:0.9em;
color: #333333;
}

#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: absolute;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}

#TB_window {
	position: absolute;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	text-align:left;
}

#TB_window img {
	display:block;
	margin: 0 auto;
	padding-top:15px;
	}

#TB_caption{
	height:25px;
	padding:7px 20px 10px 15px;
	float:left;
	font-size:0.9em;
	color:#666;
	font-weight:bold;
}

#TB_closeWindow{
	height:25px;
	padding:20px 20px 10px 0;
	float:right;
	font-size:0.9em;
}

#TB_closeAjaxWindow{
	padding:5px 10px 7px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#e8e8e8;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: absolute;
	display:none;
	height:100px;
	width:100px;
	z-index:101;
}

#TB_HideSelect{
	z-index:99;
	position:absolute;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	margin-bottom:1px;
}

Modifié par pp51 (28 Jan 2007 - 14:16)

pp51 a écrit :
1/ sous ie (version 6 chez moi):
J'ai l'impression que lorsqu'on passe de page en page (bouton suivant sur la fiche produit), il y a un bug d'affichage (furtif) sous ie: au chargement de la page, la page "s'allonge" puis reprend ensuite sa taille normale... vous le constatez aussi ?

En effet, ça doit venir du mode de rendu étrange d'Internet Explorer... L'essentiel est que ça revienne à la page, non ?

pp51 a écrit :
2/ Quand j'agrandis beaucoup la taille de la police, le design reste à peu près en place, sauf ma colonne de gauche qui masque une partie de mon footer. Savez-vous comment y remedier ?

Je supposte que mettre un clear:left; à ton footer devrait pouvoir résoudre ton problème?

En ce qui concerne le CSS qui ne se valide pas, c'est car tu utilises du CSS 2.1 ou 3 et que le validateur n'en est qu'à la version 2. Je crois qu'il faut aller dans les préférences, ou quelque chose comme ça.

Hello Sylvain,

a écrit :

En effet, ça doit venir du mode de rendu étrange d'Internet Explorer... L'essentiel est que ça revienne à la page, non ?

En effet, mais je n'ai jamais vu ce phénomène sur d'autres sites
Je pensais que ça pouvait venir de ma css, non ?

a écrit :

Je supposte que mettre un clear:left; à ton footer devrait pouvoir résoudre ton problème?

En ce qui concerne le CSS qui ne se valide pas, c'est car tu utilises du CSS 2.1 ou 3 et que le validateur n'en est qu'à la version 2. Je crois qu'il faut aller dans les préférences, ou quelque chose comme ça.

Le clear:left a eu le même effet que le clear:both; dans les 2 cas, la colonne de gauche masque toujours le footer quand la police est agrandit

Des idées ?

Bonjour,

ta colonne gauche est en absolute et sans changer de positionnement elle passera toujours sur ton footer à l'agrandissement (elle est hors du flux). Il faudrait voir de la passer en relative avec un overflow: hidden pour FF et elle devrait pousser ton footer ou encore en float et un clear sur le footer.
Modifié par ghost (28 Jan 2007 - 18:29)

Merci Ghost, effectivement j'ai réussi à faire avec un float sur la colonne de gauche.

Par contre, quelqu'un a une astuce pour le problème de ma page qui s'allonge et rétrécit pour reprendre la bonne taille sous ie ?

Je pinaille, mais je trouve que ça fait pas top pour les 80% des internautes qui utilisent encore le bouzin
Modifié par pp51 (28 Jan 2007 - 20:14)

pp51 a écrit :
Par contre, quelqu'un a une astuce pour le problème de ma page qui s'allonge et rétrécit pour reprendre la bonne taille sous ie ?

Hello, dur de t'aider pour moi, je n'ai pas IE6 sous la main et ça ne le fait visiblement pas sous IE7.
Essaie de voir à quel moment cela se produit, si c'est au chargement d'une image par exemple. Supprime des bouts de code de ta page, et regarde si ça y fait quelque chose. En le faisant petit bout par petit bout, on finit par trouver ce qui est à l'origine.

Re,

Ben , je n'ai pas trop de problème sous iE (7&6) à part un léger artéfact d'une 1/2 seconde au chargement... bon adsl 7.8mega peut être que ? en tout cas ta page n'est pas bien lourde moins de 80k alors je ne vois pas

Bonjour

@Sylvain:
Je crois que la page s'allonge au chargement lorsque la barre de petites vignettes (haut dessous du footer) apparait.

Mais je ne vois pas ce qui peut clocher ici ? Que pensez-vous du code css ci-dessous ?

#elements li{
float:left;
text-align:center;
margin-right:20px;
list-style-type:none;
padding-bottom:20px;
}

#elements span{
display:block;
}

#elements a{
margin-top:20px;
display:block;
text-decoration:none;
color:#666;
font-size:0.8em;
text-align:center;
width:90px;
float:left;
}

#elements img {
display:block;
}

@tous:
des idées

Merci
Modifié par pp51 (29 Jan 2007 - 15:30)