[Résolu] Probleme position sur Firefox mais pas sous Chrome / IE8

Bonsoir tout le monde,

je viens vers vous ce soir avec un problème qui me tracasse depuis un bon moment. Dans le site que je suis en train de développer, le contenu doit etre dans un cahier à 2 pages. Comme ces pages doivent avoir la meme hauteur quelque que soit le contenu de chacune d'elle j'ai construit le "cahier" avec des display table / table-cell. Jusque la tout vas bien dans tous les navigateurs.

C'est pour la décoration que ca se gate. En haut de chaque page il faut que je mette une div avec une image de fond. Ce que j'ai fait avec une div dans chaque page en position: absolute. Ca rend parfaitement bien dans Chrome et IE8+, mais pas du tout dans Firefox... Je me demande si ca vient du mix table-cell / absolute.

Sous Chrome / IE8+
http://snag.gy/CW9OS.jpg

Sous Firefox
http://snag.gy/llIoU.jpg

Et un jsfiddle pour vous montrer le html / css tel que fait sur le site : http://jsfiddle.net/cd74z/4/

L'un d'entre vous aurez t il la piste qui me sauvera la vie ?
Merci !

PS : La barre rouge sur le coté ne fait partie des bandeaux du haut. C'est une autre div sur le meme principe qui plante aussi.
Modifié par Molkobain (05 Nov 2013 - 09:39)

Bonjour,

c'est malheureusement un problème connu de Firefox : il ne sait pas gérer les positions et les display table, donc je confirme que c'est bien l'association des deux qui ne fonctionne pas . De mémoire il faut truander avec un parent en display block pour le faire fonctionner (mais je pense qu'en cherchant un peu sur le forum/sur google tu devrais trouver des sujets qui traitent ce problème).

Bon courage !

Effectivement, je n'arrivais pas a poser les mots sur ce probleme ce qui rendait mes recherches peu fructueuses. Mais en tapant "Position table-cell absolute firefox" dans Google c'est l'euphorie !

Je suis en train de rectifer le tir dans mons code et je mettrais a jour le jsfiddle. L'astuce que j'ai trouvé la plupart du temps c'est de faire une div "position: relative" pour encapsuler celle en absolute.

Merci !

Edit : JSFiddle mis a jour : http://jsfiddle.net/cd74z/6/
J'ai juste rajouter une div positionnée en relative autour de celle absolute.
Modifié par Molkobain (05 Nov 2013 - 09:39)