Différence positionnement ie et firefox

bonsoir à tous!

puisqu'un dessin vaut mieux qu'un long discours voici mon problème en image:



ma css:

.conteneur

 { 
	width: 780px;
	position: absolute;
	left: 50%;
	margin-left: -390px;
}

#header
 {
         width : 780px;
         height: 150px;
}

#gauche
{
	float: left;
	width: 150px;
}

#centre

{	
	width: 630px;
	margin-left: 150px;

}

#pied

{
	margin: 0 auto;
	width: 780px;
	height: 70px;
	clear:both;

}

ma page:

http://ayiore.free.fr/agua/sitephp/

ça fait un moment qu je cherche help!

merci d'avance!
Modifié par ayiore (15 Jan 2006 - 22:04)

Bonjour ayiore.

Pourquoi donner une largeur à #centre puisque par défaut #centre occupera l'espace disponible (ici 630px) ?
Modifié par Stephan (15 Jan 2006 - 22:16)

Le problème c'est que tu as trop épuré ton CSS pour nous le présenter, non ?
Ben, le principe du contenu flotté c'est que tant qu'il y a de la place, on case du contenu, mais s'il n'y en a plus le contenu qui dépasse passe à la ligne. C'est ce qu'il se passe avec ta partie de droite, qui se retrouve en bas, mais à droite quand même à cause de la marge de gauche à 150px.

Maintenant, tes blocs ont des largeurs fixes dont le total fait 780px, et ton conteneur fait 780px. Il suffit qu'un seul des éléments du contenu (gauche ou droite) dépasse d'un pixel pour que ça parte dans tous les sens. Il aurait mieux valu se donner un peu de marge.

Genre :
Conteneur à 760px de large parce que 780px c'est trop court pour du 800×600 (faut penser à la barre de défilement, aux possibles bordures de fenêtre, etc.) !

Colonne de gauche à 150px.

Bloc de droite à 600pixels [EDIT: comme le dit Stephan, le mieux est de ne pas donner de largeur fixe à ce bloc !], aligné à droite avec un float: right;, pourquoi pas...

J'ai peur de dire une bêtise, faudrait que je révise le positionnement avec les contenus flottés, les marges, tout ça...

Je te renvoie aux tutoriels :
Comprendre le positionnement des balises en CSS
Et aussi, ce tutoriel sur le centrage des éléments ou d'un site, parce que la méthode que tu utilises est franchement pas tip-top (elle bousille le rendu de ton site sous IE Mac !), et qu'il y a quand même plus simple et plus logique !
Modifié par mpop (15 Jan 2006 - 22:17)

Au passage, ce site fait buguer Firefox 1.5 (linux) chez moi, ou plutôt il le fait turbiner à fond (100% du CPU utilisé, ralentissement affligeant tant que je suis sur la page... par contre si je change d'onglet ça s'arrête !). Je ne sais pas trop à quoi c'est dû, à priori pas à du Javascript. Peut-être à ça :

<th>> </th>

Répété plusieurs fois dans le code. Ça ne résoudra peut-être pas le problème, mais tu aurais intérêt à corriger ces erreurs.
EDIT: si par hasard c'était voulu, il faudrait remplacer > par <
Sinon, si on désactive les CSS, le bug s'arrête. Il faudrait peut-être passer les feuilles de style au validateur CSS pour voir ce que ça donne.

De même, remplacer tous tes

du texte du texte du textew<br>du texte du texte du texte du texte du texte du texte du texte du texte du texte<br><br>du texte etc.

par

<p>Du texte... du texte</p>
<p>Du texte... du texte</p>
<p>Du texte, etc.</p>

pourra pas faire de mal.
Modifié par mpop (15 Jan 2006 - 22:28)

merci bcp!

effectivement en supprimant la largeur de ma partie centrale cela redevient correct sous ie!

C'est donc [Résolu] ?