28172 sujets

CSS et mise en forme, CSS3

Salut,

J'ai un problème sur un des sites que je développe (http://dafy.epsigon.com). Il est basé sur un gabarit en 3 colonnes qui se positionnent avec des float:left et dont l'ordre dans le CSS est "colonne du centre", "colonne de gauche", "colonne de droite".

Le souci vient de ma colonne centrale lors du chargement de la page avec FF 3.x qui décale son contenu de quelques pixels vers le bas... Et dès que je rafraichis la page tout se repositionne correctement.

Le souci c'est que ça n'apparait pas tout le temps mais revient régulièrement. Passez d'un onglet à l'autre et vous allez vous apercevoir du souci.

Erreur avant rafraichissement :
http://www.zimagez.com/miniature/dafy-ko.jpg

Tout ok après le rafraichissement :
http://www.zimagez.com/miniature/dafy-ok.jpg
Bonjour,

Je ne peux pas tester le problème ici (je n'ai pas FF), mais si tu utilise float left sur tes éléments pour les positionner, il devraient être dans l'ordre : gauche, centre, droite dans ton HTML.
Merci mais pas vraiment, j'utilise cette technique des float:left avec des margins (positives et négatives).

Ca me permet d'avoir une page XHTML visible dans l'ordre que je souhaite pour Google et les navigateurs texte, et un affichage multicolonnes dans les navigateurs classiques.


<div id="pagewrapper">
  <div id="content">Colonne du milieu</div>
  <div id="leftcol">Colonne de gauche</div>
  <div id="rightcol">Colonne de droite</div>
</div>



#pagewrapper {
  position : relative ;
  width : 940px ;
  overflow : auto ;
  }
  
#content {
	float : left ;
	display : inline ; /* IE Hack */
	margin : 0 230px ;
	width : 482px ;
	}
  
#leftcol {
	float : left ;
	display : inline ; /* IE Hack */
	margin-left : -942px ;
	width : 200px ;
	}
	
#rightcol {
	float : left ;
	display : inline ; /* IE Hack */
	margin-left : -200px ;
	width : 200px ;
	}	 	


Ca donne ça simplifié.
Re,

Personne n'a d'idées ?
Est-ce une bug relatif à Firefox ? Est-ce une mauvaise interprétation de mon codage ?

Merci Smiley cligne