[resolu] Z-index et div sous firefox

bonjour !

j'ai un petit souci avec la mise en page de la prochaine version de mon site.


voila ce matin je galeré avec le menu deroulan et ie7 : il fonctioné sous firefox mais pas sous ie.

ce soir apres avoir vadrouillé sur le web et sur alsareation j'ai essayé de modifié ma feuille de style avec des z-index.

et la miracle mon graphisme s'affiche correctement sous ie 7

mais a ma grande surprise c'est le gros bordel sous firefox 2

en effet lorsque le menu s'affiche il pousse le contenu du calque juste dessous (corps). deplus le calque "corps" debute a coté du menu...

pouvez vous m'aider ? merci !!

la page se trouve a cette adresse : [adresse enelevé]

voici mon html :

code enelevé

et voici ma feuille de style css

/*generalité de mise en page*/

a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
}

.gras
{
font-weight : bold;
}

/*debut du design */

body {
width : 760px;
margin : auto;
background-color : #ffffff;
font-family: Verdana,sans-serif;
font-size:0.8em;
}

#page 
{
background-color : #ffffff;
border: 1px solid #000000;
}

#en_tete {
width : 150px;
height :160px;
float: left; /* Le logo flottera à gauche */
background-color : #ffffff;
z-index:2;
}

/*menu 1*/
#menu
{
width : 600px;
height : 160px;
float: right; /* Le menu flottera à droite*/
text-align:center;
background-color : #ffffff;
z-index:2;
}

#main-menu {
margin:0;
bottom:0;
right:0;
white-space:nowrap;
font-size: 80%;
}

#main-menu li {
display:block;
float:left;
list-style-type:none;
margin-top:2px;
margin-right:2px;
margin-left:2px;
margin-bottom:30px;
padding:0;
text-transform: uppercase;
}

/*Les liens normaux*/
#main-menu a {
display:block;
float:left;
padding:10px 16px 10px 16px;
background:#fff;
border-bottom: 3px solid #acacac;
color: #acacac;
font-weight: normal;
text-decoration: none;
}

/*Les liens au survol et rubrique en cours*/
#main-menu a:hover, #main-menu #selected a {
color:#007e3f;
background: #ebebeb;
border-bottom: 3px solid #007e3f;
font-weight: normal;
text-decoration: none;
}

/*fin du menu 1 */

/* menu 2*/

/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */

/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
	background: #ffffff;
	width: 760px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	z-index:100;
}
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
	z-index:100;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: auto;
	color: #ffffff;
	background: #1e78bd;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
	z-index:100;
}
#menuDeroulant li a:hover 
{ 
background-color: #007e3f; 
z-index:100;
}
#menuDeroulant li a:active 
{ 
background-color: #007e3f; 
z-index:100;
}

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #ffffff;
	z-index:100;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: none;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	z-index:100;
	
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #000000;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: #ffffff;
	z-index:100;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #c7e8f5;
	display: block;
	z-index:100;
}

#menuDeroulant li:hover > .sousMenu { 
display: block; 
z-index:100;
}

/*fin menu 2 */

/* corps */

#corps
{
z-index:2;
/* float:left; */
background-color : #ffffff;
}

#corps h1
{
text-align:center;
z-index:2;
}

#corps a:visited, a:active, a:focus, a:link, a 
{
color : #2078be;
text-decoration:none;
z-index:2;
}

#corps a:hover
{
text-decoration:underline;
z-index:2;
}

#corps h2
{
text-align:center;
border-bottom: 2px solid black;
z-index:2;
}

.message a:hover
{
text-decoration:underline;
}

.intro
{
text-align:center;
}

.intro a:hover
{
color : #2078be;
text-decoration:underline;
}

/* bas de la page */

.copyright {
font-size : 0.8em;
text-align : center;
color : black;
}

.copyright a:visited, a:active, a:focus, a 
{
color : #2078be;
}
#bas
{
color : black;
text-align:center;
margin-top : 0px;
margin-bottom : 0px;
float:left;
background-color : #ffffff;
z-index:2;
}

#bas a:visited, a:active, a:focus, a 
{
color : #2078be;
text-decoration:none;
}

#bas a:hover
{
color : #2078be;
text-decoration:underline;
}

#pied {
width : 756px;
height : 50px;
background-color : #ffffff;
z-index:2;
} 

merci !
Modifié par f-webconcept (13 Jun 2007 - 13:44)

Bonsoir,
pour éviter ce genre de désagrément, tu dois extraire du flux normal ton
sous menu via la position:absolute. L'élément positionné ainsi étant sorti du
flux normal ou hors flux, son affichage n'aura aucun impact sur l'affichage des éléments qui l'entourent.
Autrement dis c'est comme s'il n'existait pas vis à vis des éléments adjacents.

Pour info, la propriété z-index ne peut s'appliquer et donc être active que
sur les éléments positionnés (absolute, relative et fixed).

#menuDeroulant .sousMenu
{
	display: none;
        position:absolute;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
}

Modifié par Hermann (08 May 2007 - 02:20)

merci beaucoup, le problème avec le sous menu est reglé.

parcontre la div "corps" se met toujours a coté de la div "menu2" sous firefox alors que sous ie elle es en dessous.

comment faire pour qu'elle se trouve dessous?