New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

Start a Discussion

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Need space between navigation menu and main content

Post Reply New Thread Subscribe

Thread Tools

kentsb's Avatar
Member Since: Jan 19, 2008
Posts: 58
kentsb is on a distinguished road

kentsb is offline
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" "">
<html xmlns="">
<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"});

QUOTE Thanks

Post Reply New Thread Subscribe

« Freeware html form builder? | Internet Bulletin Board »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread Starter
Last Post
Main Menu Maintenace scripts bobtomay OS X - Operating System 4 12-02-2007 03:43 PM
Error Detected - Main Menu ambivalent OS X - Operating System 11 04-24-2007 09:54 AM
Main Menu problems essie OS X - Apps and Games 0 03-28-2007 11:17 PM
Questions about Main menu and its use Mactime OS X - Apps and Games 4 03-26-2007 07:52 PM
Anything more than 'Main Menu' required? pod OS X - Operating System 2 01-29-2007 10:24 AM

All times are GMT -4. The time now is 12:05 AM.

Powered by vBulletin
Copyright ©2000 - 2015, Jelsoft Enterprises Ltd.

Welcome to

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!

(4 digit year)

Already a member?