Probléme avec firefox + centrer mon menu css

Bonjour j'aimerais avoir des informations sur un probléme ou plutot 2 lol

1/ dans ma page web que je fabrique actuellement j'utilise la balise <center> pour centrer un titre de ma page le seul probléme c'est que IE l'affiche trés bien mais pas firefox (lui il décale sur le bord droit de la page) peut étre est ce lié à ma page en css que j'ai défini pour toute mes pages html ... pareil pour la police ... avec ie ma verdana s'affiche trés bien mais avec mozilla il me remet tout en arial

2/ en parlant css, j'ai créé un menu avec mais le probléme que je rencontre est le suivant: je n'arrive pas à centrer le menu !!! j'ai trouvé une balise du style "position :...." mais le probléme c'est qu'il me le centre à la verticale au centre de ma page or je voudrais qu'il le centre au milieu de ma page sans que les différents titre ne soit les uns au dessous des autres est ce que quelqu'un aurait une idée ???
je laisse le code css que j'ai mis dans ma page css. pour que vous voyez éventuellement d'ou peut provenir le probléme.... ainsi que la page web [url=http://souly456.free.fr/Site%20Internet%20Suly/images/bboying.html]ICI[/url]
merci d'avance

<style type="text/css"> 

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #003366 ;
}

div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: center ;
	border: 2px solid #ab4 ;
	background: #fff ;
}

h1#header
{
	height: 258px ;
	background: url(apple.jpg) no-repeat left top ;
	margin: 0 ;
}

h1#header a
{
	width: 400px ;
	height: 70px ;
	display: block ;
	background: url(title.gif) no-repeat ;
	position: center ;
	left: 350px ;
	top: 15px ;
	text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
 possible grâce à la propriété display: block ; qui transforme le lien
  en élément de type block, auquel on peut donner des propriétés de taille.
   On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
 cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les syntèses vocales */


ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(bg_menu.gif) repeat-x 0 -25px ;
	list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a
 la taille de l'image utilisée en fond, on met ensuite l'image de fond
  avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */

div#centre {
	overflow: hidden;
	background: center;
	background-color:#003366
}


ul#menu li
{
	float: left ;
	text-align: center ;
}

#global {
     margin-left: auto;
     margin-right: auto;
     width: 100; /* largeur obligatoire pour être centré */
     }


	
	
	
}/* On rend les li en flottant pour pouvoir les
 afficher horizontalement, on cache les puces, et on centre le texte */

ul#menu li a
{
	width: 130px ;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #dea ;
}/* C'est sur les liens que le gros du travail est
 effectué, largeur, hauteur de ligne, taille de police, graisse de police,
  espacement des lettres, couleur, bordure et decoration du texte. 
  Nous pouvons dimensionner les a grâce à la propriété display: block ; */

ul#menu li a:hover
{
	background: url(bg_menu.gif) repeat-x 0 0 ;
}/* Et pour finir on décale l'image de fond au passage
 de la souris pour laisser aparaître l'état survolé de l'image, 
 voir le tutoriel sur les roll over pour plus de détails */

div#contenu
{
	padding: 0 25px 0 100px ;
	background: url(bg_page.gif) no-repeat 15px 15px ;
}

div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	background: url(little_apple.gif) no-repeat left bottom ;
	color: #9b2 ;
	border-bottom: 1px solid #9b2 ;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#contenu a
{
	color: #8a0 ;
}

div#contenu a:hover
{
	color: #9b2 ;
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}


pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}


ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0 0 8px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 8px pour aérer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 170px ;
	line-height: 30px ;
	color:white ;
	text-indent: 5px ; /* On décale le texte de 5px du bord gauche */

	text-decoration: none ;
	background:#003366 no-repeat 5 5 ; /* On met une image de background, que l'on positionne à 5px du bord gauche et 5px du bord haut */
	border: 1px solid #dbd ;
}

ul#menu li a:hover
{
	background:#044fd2  no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
}

body {
 scrollbar-arrow-color:white;
 scrollbar-track-color:003366;
 scrollbar-shadow-color:003366;
 scrollbar-face-color:003366;
 scrollbar-highlight-color:white;
 scrollbar-darkshadow-color:white;
 scrollbar-3dlight-color:white;
}


</style>

Configuration: Windows XP
Internet Explorer 7.0