[Resolu]Probleme de mise en page avec Firefox

Bonjours

Je suis nouveau sur le forum, je débute en CSS. J'ai décider de m'y mettre depuis peu. Je travaillais surtout avec du html classique avec des frames etc...

J'ai donc utilisé un des tutos de alsacreation (http://css.alsacreations.com/xmedia/exemples/design_css2/) pour créer ma nouvelle page. J'y ai ajouter, comme vous allez le voir un bloc supplémentaire au dessus du header qui me permettra de faire difiler les lien annonce et j'ai inversé les 2 colonnes.

Mon problème se situe sur 2 points mais uniquement sur firefox.
http://www.pharmaone.fr/indextest.htm

On peut voir que entre le bloc du haut "annonce" et le "header" il y a un espace et que les liens du sidebar ne se formate pas du tout comme le fait IE... la couleur gris et blanc que vous voyez sous le bloc "annonce" correspond au background image que j'ai appliqué au "div global" et qui fait la taille de mon global soit 770px.

voici mon code CSS

body {
	font: 80% Verdana, Arial, Helvetica, sans-serif;
}
html, body {
	height: 100%;
	margin: 0;
	background:  url(elements/fond.png);
	}
div#global {
	min-height: 100%;
	width: 770px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	background: #FFFFFF url(elements/fondmenu.gif) repeat-y center;
	}

div#center {
	/* Pour éviter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px; 
	overflow: auto;
	}
div#footer {
	position: absolute;
	width: 98%;
	bottom: 0;
	background: #CCCCCC url(Aucune) repeat-x;
	color: #fff;
	border: Aucune;
	}	
div#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	vertical-align: middle;
	}
div#header2 {
	background: url(elements/annonce-pharma.gif) no-repeat;
	color:#FFFFFF;
	height: 32px;
	min-height: 32px;
	position: relative;
}
div#header {
	background: #FFFFFF url(elements/pharmaone-ban.gif) no-repeat;
	color: #fff;
	height: 114px;
	position: relative;
	}
div#header h1 {
	margin: 0;
	position: absolute;
	left: 22px;
	font: 3em Georgia, serif;
	height: 30px;
	width: 147px;
	top: 5px;
	}
div#header h5 {
	margin: 0;
	position: absolute;
	left: 20px;
	font: 3em Georgia, serif;
	height: 30px;
	width: 147px;
	top: 79px;
	}
div#content {
	float: right;
	width: 590px;
	}
div#content h2 {
	padding-left: 35px;
	background: #fff url(img/titre.png) left center no-repeat;
	color: #000000;
	}
div#content h3 {
	color: #c00;
	font-variant: small-caps;
	}
div#sidebar {
	float: left;
	width: 180px;
	height: 562px;
 	background-image:  url(elements/menu.gif);
	background-repeat: repeat-x;
	}
div#sidebar h4 {
	color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: center;
}
ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#menu li a {
	display: block;
	height: 10px;
	background: url(Aucune) no-repeat left top;
	padding-left: 30px;
	margin: 10px 0 2px;
	border-bottom: 1px Aucune #7fcf2e;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	padding-top: 1px;
}
ul#menu li a:hover {
	background-position: left bottom;
	color: #3399FF;
}
ul#menu2 {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#menu2 li a {
	display: block;
	height: 10px;
	background: url(Aucune) no-repeat left top;
	padding-left: 30px;
	margin: 10px 0 2px;
	border-bottom: 1px Aucune #7fcf2e;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	padding-top: 1px;
}
ul#menu2 li a:hover {
	background-position: left bottom;
	color: #FF6600;
}
ul#menu3 {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#menu3 li a {
	display: block;
	height: 10px;
	background: url(Aucune) no-repeat left top;
	padding-left: 30px;
	margin: 10px 0 2px;
	border-bottom: 1px Aucune #7fcf2e;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FF6600;
	padding-top: 1px;
}
ul#menu3 li a:hover {
	background-position: left bottom;
	color: #3399FF;
}
div#sidebar h3, div#footer p, div#sidebar p  {
	padding: 0 0px;
	}
a {
	color: #3399FF;
	font-weight: bold;
	}
a:hover {
	color: #FF6600;
	}

Pour synthétiser le problème, sur internet explorer c'est exactement la mise en forme que je veux pour mon site.
Voila je vous remercie
Modifié par Mr-Mars (13 May 2008 - 10:41)

Bonsoir,
l'espace vertical entre le header2 et le header est dû à la présence d'un paragraphe vide <p>nbsp;<p> et précisement à sa marge haute par default.
Le plus propre évidement serait de supprimer ce <p>. Si ce n'est pas possible, lui attribuer un margin-top:0

Les autres décalages viennent d'un problème de fusion des marges.
Solution: annuler le marge-top par default de tes h4 et les remplacer par un padding-top.

Ca y est ca marche !
Mille merci pour ton aide