Bug étrange de positionnement dans Firefox [résolu]

Bonjour à toutes et à tous,

Je fais appel à vous, car je suis face à un bug (dans Firefox uniquement), que je ne m'explique pas.

Description du problème

Lorsque je me rends sur une page du site posant problème (exemple : "livre d'or"), puis que je reviens sur la page d'accueil (icône "maison"), le contenu de la colonne de droite est décalé vers le bas. Si je rafraichis la page, tout rendre dans l'ordre.

Images du problèmes

Normal (image 1) :
http://www.teledisnet.be/web/pgi06532/DOCS/normal.jpg

Bug (image 2) :
http://www.teledisnet.be/web/pgi06532/DOCS/bug_firefox.jpg

Code

Structure :

<div id="menu"> // menu gauche
   <?php require_once ('includes/menu.php'); ?>
</div>
<div id="rightCol"> // contenu à droite du menu
...
</div>

CSS :

div#menu {
	float:left; width:346px;
	background:url(../images/bg_menu.jpg) repeat-x #ffffff;
	padding:0; min-height:1000px;
	height:auto !important; height:1000px; /* For IE 6 */
	font-family:Arial, Helvetica, sans-serif;
}
div#rightCol {width:514px; float:right;}

Le code est valide XHTML 1.0 Strict et le problème n'apparait pas sur Opera ou Internet Explorer 7.

Auriez-vous une idée de la raison de ce bug et comment le corriger ?
D'avance, je vous remercie.
Modifié par Sylvinch (23 Sep 2007 - 23:02)

Hello,

Je n'ai pas réussi à reproduire ou constater le problème. Cependant, il est probable que ça soit lié à l'utilisation de deux flottant en largeur fixe: au moindre problème qui fait que les deux blocs ne peuvent pas tenir côte-à-côte, le second passe à la ligne.

Solution: n'utiliser qu'un seul flottant:

div#menu {
	float: left;
	width: 346px;
}
div#rightCol {
	margin-left: 350px;
}

Merci beaucoup de vous être attardé sur mon problème.
Malheureusement, je ne suis pas parvenu à le résoudre, malgré vos conseils.

Petite indication que j'ai oublié de préciser : le bug ne se produit qu'en ligne. En local (sous WAMP), aucun souci. D'où mon interrogation : cela pourrait-il être dû au nom de domaine ? Je ne vois pas trop comment, mais étant donné qu'en local, pas de souci... De plus, le problème survient aléatoirement, c'est ça le plus bizarre. S'il s'agissait d'une erreur dans le code, je suppose que le problème serait permanent.

Qu'en pensez-vous ?

Merci.

Salut,

J'ai bien le même bug sur firefox, vraiment bizarre...

Les 2 div "menu" et "righCol" sont collées et occupent toute la largeur. Comme le dit Florent, au moindre problème généré (saut de ligne, caractère invisible,...) le second block passe à la ligne.
Essayes à tout hasard de réduire la largeur de ton block de droite pour laisser un petit espace entre les 2. Ta plus grosse image fait 500px de large avec 4px de border. Essayes donc avec une largeur de 504px (ou plus si j'ai loupé un élément) au lieu de 514 pour ta div rightCol . Si ton problème est de l'ordre de quelques px, ca pourrait passer.

Toujours rien.

Je viens de comparer le code source généré par la page boguée et la page quand elle s'affiche correctement (avec le logiciel CompareIt!) => le code est identique au caractère près. Pas d'espace supplémentaire ou quoique ce soit donc.

J'ai déjà vu des bugs bizarres sous IE, mais avec Firefox, ce n'est pas coutume. Mais celui-ci est particulièrement embêtant pour mes visiteurs surfant avec Firefox. Et ça fait plusieurs semaines que je cherche sans résultat. Je commence à désespérer...

Ce qui m'intrigue le plus, c'est que lorsqu'on fait un (ou parfois plusieurs) F5 pour rafraichir la page, ça se remet en place. Ca, ce n'est pas normal du tout puisqu'en principe, rien n'a changé au niveau du contenu de la page.

Un bug au niveau du cache ?
Modifié par Sylvinch (23 Sep 2007 - 20:29)

Dans ta css tu as:

div#fix {display:table; width:100%; margin:0; padding:0;}

Pourquoi ce "display: table;" ? (simple question ).
Peux tu essayer de le remplacer par un "display: block;", ..., à tout hasard ?

mick38, merci beaucoup, je crois que vous venez d'identifier la cause du problème. En remplaçant :

div#fix {display:table; width:100%; margin:0; padding:0;}

par :

div#fix {display:block; height:100%; width:100%; margin:0; padding:0;}

le problème, dans Firefox, semble résolu.

CEPENDANT, voilà que désormais, ce même bug (image 2) survient dans IE6, mais en permanence, cette fois.
En fait, c'est certainement la raison pour laquelle j'avais mis ce "display:table". Ca résolvait le problème dans IE6...

Mais ça a l'air difficile de contenter tout le monde.

IE6 est, malheureusement, encore fort utilisé. C'est donc tout aussi embêtant, voire plus.
Modifié par Sylvinch (23 Sep 2007 - 22:52)

Tu peux utiliser les commentaires conditionnels ou encore des hacks css pas bien méchants comme !important pour donner un code spécifique à IE6.

div#fix { display:block !important; display:table;}

Edit : IE ne supporte pas le display:table, ce serait donc p-e le height:100% qui fait bouger les choses.
Modifié par JyuniX (23 Sep 2007 - 23:01)

Oui, c'est juste, je viens d'y penser. Je crois que je peux clore mon sujet. Merci beaucoup pour votre aide, c'était vraiment très aimable à vous de m'avoir accordé un peu de votre temps.