pb de chevauchement avec mozilla

[Mado]

bonjour le probleme a deja ete aborde mais la j'ai fait une css a moi,

et ca fonctionne tout bien partout apparement sauf en 800x600 ou j'ai le bloc contenant ma banniere et un petit menu de navigation qui chevauche avec le dessous qui du coup devient ilisible

voici le site

http://zengrafom.org

et voici la css

/* CSS Document *zengrafom. Marie Pédrotti kit 1*/
body {
	font-family: verdana, arial, helvetica, sans-serif;
	margin : 0;
	padding: 0;
	font-size : 80%;
	color: #000000;
	background-color: #ffffff
	}
a, a:link {
	color : #000000;
	text-decoration : none;
	}
a:hover {
	color: #ff8a00;
	}
#conteneur {
	text-align: center;
	}

#bloc-centre {
	margin-left: 1%;
	margin-right: 1%;
	text-align: left;
}	

#bloc-haut {
	height : 185px;
	color:#ffffff;
}

#bloc_orange {
	float : left; 
	text-align:center;
	width : 190px;
	color:#000000;
	background-color : #ffffff;
	}
#bloc_rouge {
	top : 0;
	width : 100%;
	background-color : #D8ECBB;
	text-align:center;
	}
#bloc_rouge ul{
	margin : 0;
	padding-left: 0px;
	padding-top:7px;
	padding-bottom:9px;
	}
#bloc_rouge li{
	font-size : 100%;
	display: inline;
  	list-style-type: none;
 	color :#000000;
  	margin : 1em;
  	line-height: 10px;
  }
#bloc_rouge a, a:link {
	color : #000000; text-decoration : none;
	}
#bloc_rouge a:hover {
	color: #ff8a00;
	}
#gauche {
	float:left;
	margin-top : 0px;
	width: 170px;
	left : 2px;
	}
#gauche a, a:link {
	color : #000000; text-decoration : none;
	}
#gauche hr {
	background-color : #Ad1a12;
	margin-top : 108px;
	width : 100%;
	height : 3px;
	}
#gauche img {
	margin-left : 2px;
}
#gauche ul {
	list-style-type: none;
	text-align : left;
	padding : 0;
	margin : 0;
	height : 20px;
	}
#gauche li{
	color :#000000;
	line-height:20px;
	}
#gauche li.rouge { 
	background :#D8ECBB;
	color :#000000;
	font-size : 1em;
	padding : 3px;
} 

#droite {
	margin-right: 1px;
	background-color: #ffffff;
	margin-left: 455px;
	width: auto;
	padding-left:3px;
	}
#droite hr {
	background-color: #Ad1a12;
	width: 100%;
	height: 3px;
	margin-left: 10px;
	}
#droite p {
	margin: 8px;
	}
#droite p.gras{
	font-weight : bold;
	text-decoration : underline;
	text-indent : 20px;
	}
#droite p.fond{
	font-weight : bold;
	text-indent : 20px;
	color : #000000;
	padding : 3px;
	border : dashed 2px #Ad1a12;
	}
#droite p.rouge{
	color : #FF0000;
	padding : 3px;
	text-decoration : underline;
	}
#droite ul {
	list-style-type: none;
	text-align : justify;
	padding : 0;
	margin : 10px;
	}
#droite li{
	color :#000000;
	}
#droite li.rouge { 
	background :#F38B36;
	color :#ffffff;
	font-size : 1em;
	padding : 6px;
} 
#droite h1, h2{
	text-align : left;
	background-color :#FFE16A;
	color :#000000;
	font-size : 1em;
	padding : 2px;
	margin: : 8px;
} 
#droite h3{
	background-color :#FFF4D0;
	text-align : center;
	color :#000000;
	font-size : 1em;
	padding : 6px;
	margin : 0;
} 
#droite img.left {
	border: 0;
	float : left;
	padding: 2px;
	}
/* CSS galerie*/
#galerie {
	margin-left: 0px;
	text-align: center;
	width: auto;
	}
.galerieA {
		margin-top: 10px;
		width: auto;
		}
#galerie img {
		margin-bottom: 10px;
		border: 1px solid #aaa;
		padding: 9px;
		}
/* fin galerie*/	

#droite a, a:link {
	color : #Ad1a12; text-decoration : none;
	}
#milieu {
	float : left;
	padding-left : 2px;
	margin-left : 5px;
	background: #ffffff;
	width: 250px;
	}
/*milieu news*/
#milieu_news{
	float : left;
	padding-left : 2px;
	margin-top : 0px;
	margin-left : 22px;
	background: #ffffff;
	width: 250px;
	border : dashed 2px #Ad1a12;
	}
#milieu_news hr {
	background-color : #Ad1a12;
	width : 90%;
	height : 3px;
	margin-top : 0;
	}
#milieu_news p {
	margin: 5px;
	padding: 3px;
	font-size : 100%;
	}
#milieu_news p.fond{
	color : #000000;
	padding : 3px;
	margin:5px;
	border : solid 1px #Ad1a12;
	background-color : #FFF4D0;
	}
#milieu_news p.background{
	color : #000000;
	padding : 3px;
	margin:5px;
	background-color : #99ccff;
	text-align:center;
	}
	/*fin milieu_news*/
#milieu hr {
	background-color : #Ad1a12;
	width : 90%;
	height : 3px;
	margin-top : 0;
	}
#milieu p {
	margin: 5px;
	font-size : 100%;
	}
#milieu p.fond{
	font-weight : bold;
	color : #000000;
	padding : 2px;
	border : dashed 1px #Ad1a12;
	}
.blanc {
	margin : 3px;
	color : #ffffff;
	}

img.middle {
	vertical-align: middle;
}
h1.middle {
	texte-align : center; 
	}

j'ai deja cherche des solutions en mettant un margin-left sur le bloc rouge, en le mettant en position absolute

apparement ca ne marche pas

Merci

Marie