Problème de navigateurs, et sans doute de code

Bonjour à tous!

Je crée actuellement un site dans lequel on retrouve un pied se retrouvant directement en bas de page (même quand ma colonne de contenu ne couvre pas l'écran). J'ai aussi une autre colonne contenant ma navigation, à droite de celle du contenu.

Le problème est le suivant : lorsque je fais afficher ma page dans Firefox, mes boutons et mon contenu sont décalés et une barre de défilement verticale apparaît. Sous Safari, tout apparaît bien, pourtant. Voici l'adresse à laquelle vous pouvez faire les constatations : www.joaniebrouillette.com/balarel/index.htm

Voici les codes, pour ceux qui ne pourrait pas voir ma feuille de style :

* { 
	padding: 0; 
	margin: 0; 
}

html, body {
	height: 100%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	background: #000;
}

#contenantglobal{
 	width: 850px;
 	background: #F1F1D6;
 	margin: 0 auto;
 	height:100%;
	position: relative;
}

#contenant1 {
	width: 850px;
	background-image: url(../images/danseur_01.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	min-height:100%;
	position: relative;
}

#faux {
 overflow: auto; 
}

#entete {
 	color: #333;
 	width: 850px;
 	height: 100px;
}

#contenu { 
 	float: left;
 	color: #333;
	background: #F1F1D6;
 	height:100%;
 	width: 335px;
 	display: inline;
 	position: relative;
 	margin: 0 0 0 275px;
 	padding-bottom: 52px;
}

#bouton {
	height: 300px;
	display: inline;
	color: #F1F1D6;
	width: 240px;
	float: right;
	background-image: url(../images/bg_boutons.gif);
	background-repeat: no-repeat;
}

#pied {
	width: 850px;
	height: 52px;
	clear: both;
	color: #000;
	background-image: url(../images/pied.gif);
	background-repeat: no-repeat;
	background-position: right;
	bottom: 0;
	position: absolute;
}

p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 16px;
	color: #000;
	margin: 5px 5px 10px 0px;
}

h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 20px;
	color: #000;
	margin-top: 32px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 0px;
}

a.general:link {
	color: #A22727;
}
a.general:visited {
	color: #666666;
}
a.general:hover {
	background-color: #000000;
	text-decoration: underline;
}
a.general:active {
	color: #A22727;
}

#bouton ul{
	list-style-image: url(../images/puce.gif);
	margin-top: 60px;
	margin-left: 100px;
}

#bouton li{
	
	font-size: 14px;
	line-height: 24px;
	color: #F1F1D6;
}

a.navigation:link {
	color: #F1F1D6;
	text-decoration: none;
}

a.navigation:visited {
	color: #F1F1D6;
}

a.navigation:hover {
	background-color: #000000;
}

a.navigation:active {
	color: #F1F1D6;
}

p.copyright {
	margin : 15px 15px 10px 275px;
	font-size: 10px;
	line-height: 12px;
}

.clear { 
	clear: both; 
	background: none; 
}

Bien évidemment, il s'agit d'un travail en progression, alors tout commentaire constructif que je devrais savoir en dehors de mon problème serait aussi apprécié. J'apprends en majorité par moi-même...

Merci de votre aide!
Modifié par PetiteJo (14 May 2008 - 04:27)

hello, je n'ai aps vu de problème sous Firefox 2.0.0.14 (sous Windows Vista)
Modifié par Noisequik (15 May 2008 - 08:27)

En fait, j'ai refait mes divs concernés et mes styles par rapport à ceux-ci et maintenant ça fonctionne... Tant mieux, mais je ne comprends pas trop pourquoi!