Probleme de div et body

Bonjour

me revoilà avec encore des questions plein la tête.
J'ai fini la conception de mon site et j'en ai mis une partie sur le net.Je vous donne le lien

www.closerie.fr/carte.html

Mon soucis majeur, c'est que sur Firefox 3.0, l'affichage se fait correctement au niveau de mes div et de mes body. Le problème c'est qu'avec Firefox 2.0 et IE6 ou inférieur, le body bottom est écarté du body top. Je vous mets le code css de ma page carte.

En gros, j'aimerai pouvoir imposer la même mise en page selon les navigateurs pour avoir quelque chose de compatible au mieux dans tous les cas de figures.

html, body, h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
}
h1 img {
	display: block;
}
img {
	border: 0;
}
a {
	color: #464544;
}
a:hover {
	color: #666666;
}
.left {
	float: left;
}
.right {
	float: right;
}
.more {
	text-align: right;
}
.clear {
	clear: both;
}

body {
	background: url(images/bg.jpg);
	text-align: left;
	font: 12px arial, sans-serif;
	color: #464544;
	padding-bottom: 10px;
}

#outer {
  background: top left url(images/bg.jpg) repeat-x;
  padding-top: 30px;
}

/** layout **/
#wrapper {
	text-align:left;
	margin: auto;
	width: 798px;
  position: relative;
  background: url() no-repeat;
 
}
#body-bot {
  background: bottom left url(images/bg_carte.jpg) no-repeat;
}
#body-top {
  background: url(images/bg_top_carte.png) no-repeat;
  max-height: 580px;
  _height: 580px;
  padding-bottom: 50px;
}

/** logo entete **/
#logo {
  width: 25em;
  text-align: center;
}
#logo h1 {
  color: #6F7033;
  font: 22px "Arial narrow", arial, sans-serif;
  line-height: 1;
  padding-top: 0.8em;
}
#logo p {
  color: #464544;
  font: 16px "Arial narrow", arial, sans-serif;
  margin: 0;
  }
  
/** menu **/

#nav {
  margin-top: 100px;
}
#nav li {
  list-style: none;
  float: right;
  background: left center url(images/arr.gif) no-repeat;
  padding-left: 10px;
  padding-right: 30px;

}
#nav a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}
#nav a:hover {
  color: grey;
}

/** fond texte principal **/
#gbox {
  width: 380px;
  margin-top: 60px;
  margin-left: 0px;
}

#gbox-bg  { background: url(images/white_top.png) repeat-y; }
#gbox-grd { background: bottom url(images/white_bot.png) repeat-x; }
#gbox-top { background: url(images/white_top.png) no-repeat; height: 24px; }
#gbox-bot { background: bottom left url(images/white_top.png) no-repeat; height: 0px; }

#gbox-grd {
  min-height: 350px;
  padding:0px 24px;
}

#gbox h2 {
  font: bold 14px arial, sans-serif;
  color: #000;
  margin: 0;
}

#gbox p {
  margin: 1em 0;
}

#features {
  background:;
  padding: 14px;
  margin: 0 -14px;
}
#features h2 {
  position: relative;
}
#features ul {
  float: left;
  width: 49%;
  margin: 1em 0;
  padding: 0;
}
#features li {
  list-style: none;
  margin-left: 8px;
}

/** footer **/

#newsletter, #events {
  float: left;
  width: 49%;
  margin-top: 1em;
}
#newsletter h2, #events h2 {
  color: #fff;
}
#newsletter .text {
  width: 125px;
}
#newsletter form {
  margin: 0.3em 0 0.6em 0;
}
#newsletter p {
  margin: 0.3em 0;
  font-size: 10px;
}
#newsletter a {
  color: #000;
}

#events {
  margin-left: 6%;
  width: 38%;
}
#events ul {
  margin: 0.3em 0;
  padding: 0;
}
#events li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/** grey box **/

#greybox {
  background: url(images/grey_bg.gif) repeat-y;
  width: 326px;
  position: absolute;
  top: 292px;
  left: 457px;
}
#greybox-top {
  background: url(images/grey_img.jpg) no-repeat;
  padding-left: 165px;
  padding-top: 18px;
}
#greybox-bot {
  background: bottom left url(images/grey_bot.gif) no-repeat;
  padding-bottom: 4px;
}
#greybox h2 {
  font: bold 12px arial, sans-serif;
  color: #E4EE6A;
  line-height: 1.5;
}
#greybox a {
  color: #fff;
}

#copyright {
  font-size: 9px;
  color: #fff;
  margin-top: 60px;
}

J'oubliai. Je fais tout le boulot sur dreamweaver et l'affichage diffère en local et en ligne sur un navigateur comme firefox.


Merci pour votre aide