Problème d'affichage sous firefox

bonjour,
j'ai fait le gabarie d'une page web avec le css suivant :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
background-color: Black;
}
div#conteneur {
position: absolute;
width: 800px;
left: 50%;
margin-left: -375px;
z-index: 1;
}
div#header {
height: 100px;
background-color: yellow;
}
div#centre {
position: relative;
background-color:red;
width: 800px;
height: auto;
z-index: 2;
padding-bottom: 20px;
}
div#pied {
height: 30px;
background-color: gray;
clear: left;
}
div#date{
	background-color: Fuchsia;
	float: left;
	width: 100px;
	height: 50px;
	margin-top: 10px;
	margin-left: 10px;
	z-index: 3;
}
div#news{
	background-color: Green;
	float: left;
	width: 650px;
	height: 50px;
	margin-top: 10px;
}
p {margin: 0;}

le HTML est le suivant :

<div id="conteneur">
	  <div id="header">header</div>

	<div id="centre">
		<div id="date">25 nov 2005</div>
		<div id="news">ceci est un test</div>
		<div id="date">25 janv 2005</div>
		<div id="news">ceci est un autre test</div>
	</div>

	   <div id="pied">footer</div>
</div>

la page s'affiche correctement sous IE6. Par contre avec Firefox j'ai un problème d'affichage : le div "centre" ne s'affiche pas !

je suis prebeur de toute aide
merci d'avance

Bonjour aaristocat et bienvenue sur ce forum...

Au passage, le id est un sélecteur à usage unique, il ne peut donc pas y avoir deux <div id="date"> ou deux <div id="news"> dans une même page. Il faut dans ce cas utiliser le sélecteur par class.

<div class="date"></div>
<div class="news"></div>

Puis, tu devrais virer tous les z-index. Je n'en vois pas l'utilité ici.

Essais ceci (ne pas oublier le sélecteur par class) :

.date{
   background-color: Fuchsia;
   float: left;
   width: 100px;
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
}
.news{
   background-color: Green;
   /* float: left; on supprime le float */
   width: 650px;
   height: 50px;
   margin-top: 10px;
   margin-left: 100px; /* et on remplace par un margin */
}

Modifié par Stephan (14 Jul 2005 - 08:21)

Stephan a écrit :
Bonjour aaristocat et bienvenue sur ce forum...

Au passage, le id est un sélecteur à usage unique, il ne peut donc pas y avoir deux <div id="date"> ou deux <div id="news"> dans une même page. Il faut dans ce cas utiliser le sélecteur par class.

<div class="date"></div>
<div class="news"></div>

Puis, tu devrais virer tous les z-index. Je n'en vois pas l'utilité ici.

Essais ceci (ne pas oublier le sélecteur par class) :

.date{
   background-color: Fuchsia;
   float: left;
   width: 100px;
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
}
.news{
   background-color: Green;
   /* float: left; on supprime le float */
   width: 650px;
   height: 50px;
   margin-top: 10px;
   margin-left: 100px; /* et on remplace par un margin */
}

meric pour la réponse mais ça ne marche toujours pas sous firefox

aaristocat a écrit :



meric pour la réponse mais ça ne marche toujours pas sous firefox

je vous soumet deux captures d'écran de ce que j'obtiens :
firefox
IE6

merci de vous pencher sur mon problème