Problème de mise en page avec Firefox et non IE (pour une fois...)

Bonjour à tous,

j'ai un chti problème de mise en page avec Firefox !!! D'habitude c'est IE qui pose soucis or sur mon projet c'est plus firefox qui se rebelle (un comble non ???)

Voilà ma page en ligne :
http://www.creation-website.info/test/cws/

Et voilà mon code CSS :

/* CSS Document */
body
{
	margin:0;
	padding:0; 
	background-color:#FFFFFF;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #4F4F4F; 
    scrollbar-face-color: #FFFFFF; 
    scrollbar-shadow-color: #669999;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #CCE5E5; 
    scrollbar-darkshadow-color: #000000; 
    scrollbar-track-color: #FFFFFF; 
    scrollbar-arrow-color: #CCE5E5;	
	height: 100%;
}
div#page {
	width: 100%;
	margin: 0 auto;
	min-height: 100%;
	position: relative;
}
div#haut
{
	width:760px;
	position:relative;
	margin-top: 0;
}
div#contenant
{ 
	width:760px;
	position:relative;
}

div#footer {
	position: relative;
	bottom: 0; 
	left: 0;
	width: 740px;
	background-image:url(images/pix_gris.gif);
	font-size: 0.9em;
	color: #FFFFFF; 
	height:20px;
	margin-top:10px;
	padding:10px 10px 0px 10px; 
	clear: both;
}
/* Calques */

.haut_gauche
{
	width:232px;
	height:150px;
	float:left;
	position:relative;
}
.haut_droite
{
	width:232px;
	height:123px;
	margin-top:10px;
	float:right;
	position:relative;
}

.encadre_home1
{ 
	width:360px; 
	float:left;
	margin:0px 5px 20px 10px;
	background-image:url(images/encadre_milieu.gif);
	position:relative;
}
.encadre_home2
{ 
	width:360px; 
	float: right;
	margin:0px 10px 20px 5px;
	background-image:url(images/encadre_milieu.gif);
	position:relative;
	margin-bottom: 0;
}
.encadre_page
{ 
	width:755px; 
	margin:0px 10px 20px 5px;
	background-image:url(images/encadre2_milieu.gif);
	position:relative;
	margin-bottom: 0;
}
.contenu
{
	margin:0px 20px 0px 20px; 
}

En fait c'est le menu qui s'affiche correctement sous IE et pas sous Firefox. Que ce soit en CSS ou avec les roll-overs de Dremaweaver, mon menu se décale en haut !!! Et même quand j'enlève l'animation flash ca pose problème...

Bref votre aide me serait très appréciable. donc d'avance je vous en remercie bien fort !

GreggBazin a écrit :
D'habitude c'est IE qui pose soucis or sur mon projet c'est plus firefox qui se rebelle (un comble non ???)

Dans la mesure où tu as basé la mise en page de ton en-tête + menu sur un bug d'Internet Explorer, ne pas retrouver le même rendu dans Firefox, Opera, Safari, Konqueror (je te laisse faire le test avec ces navigateurs...) n'est pas très surprenant.

La mise en page « étrange » avec ces navigateurs tient au comportement normal des flottants. Voir à ce sujet :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Les deux éléments contenus dans l'en-tête ne repoussent pas les limites de leur conteneur (l'en-tête, donc). Sauf dans Internet Explorer, à cause d'un comportement propriétaire des blocs ayant des dimensions fixes (voir à ce sujet le concept de HasLayout dans Internet Explorer Windows).