- Joined
- Jan 19, 2008
- Messages
- 73
- Reaction score
- 2
- Points
- 8
- Location
- Northern California
- Your Mac's Specs
- iMac 21.5" with Retina 4K Display, 3.1GHz i5, 16GB RAM, 256GB Flash Storage Late 2015
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">
<head>
<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 */
}
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<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>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p></div>
<div id="mainContent">
<!-- TemplateBeginEditable name="ERMain" --><!-- TemplateEndEditable -->
<p> </p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- 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"});
//-->
</script>
</body>
</html>
TIA
Kent
<!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">
<head>
<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 */
}
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<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>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p></div>
<div id="mainContent">
<!-- TemplateBeginEditable name="ERMain" --><!-- TemplateEndEditable -->
<p> </p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- 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"});
//-->
</script>
</body>
</html>
TIA
Kent
