I have set up a Template page with the Spry Menu Bar that comes with Dreamweaver CS4 Mac. In Safari I get a small gap between the menu bar and the main content area. This is what I want. In Firefox I get no gap. I have tried padding and margins on all objects with no change. I have even tried setting a min-height in the header. Below is the HTML for this template page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Caring Clowns International</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #999;
.oneColFixCtrHdr #container {
width: 1000px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: #FFFfff;
.oneColFixCtrHdr #header {
height: 170px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10;
padding-left: 0px;
background-color: #FFFfff;
text-align: center;

.oneColFixCtrHdr #mainContent {
background-color: #336699;
min-height: 500px;
font-size: 11px;
color: #FFfffF;
font-weight: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
.oneColFixCtrHdr #footer {
background-color: #FFFfff;
height: 68px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<body class="oneColFixCtrHdr">

<div id="container">
<div id="header">
<h1><img src="../CCILogo.gif" width="581" height="123" /></h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
<li><a href="#">Item 4</a></li>
<p> </p></div>
<div id="mainContent">
<!-- TemplateBeginEditable name="ERMain" --><!-- TemplateEndEditable -->
<p> </p>
<!-- end #mainContent --></div>
<div id="footer">
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});