• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4254
  • Last Modified:

How to Center Spry Menu Bar

I have unsuccessfully tried various approaches to centering the Spry Menu Bar in the attached test page (see screen grab).

The positioning of the MenuBar is also affected by a stylesheet 'SpryMenuBarHorizontal.css' which was generated in Dreamweaver CS3.  I have modified this stylesheet to suit my present needs but can't seem to get the menu bar items to center within #topnavbar.

The relevevant rule (as far as I can tell) in 'SpryMenuBarHorizontal.css' is pasted below.

What's the best way to center this menu bar?

Also, what's the best way for me to attach an external stylesheet such as the Spry one referenced above for your review?
---------------------------------
(exceprt from 'SpryMenuBarHorizontal.css')
----------------------------------
ul.MenuBarHorizontal
{
/*      position: relative;*/
/*      right: 50%;*/
/*left: 50%;
      float: left;*/
/*      margin: 0;*/
width: 100%;
margin: auto;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      cursor: default;
/*      width: 50em;
      text-align: center;*/
}
<!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" />
<title>Test Page - 1 Col Elastic w Horiz Nav Bar</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	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: #FFFFFF;
	background-color: #000000;
}
 
/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
#container {
	width: 1000px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0px;
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-color: #0000FF;
}
#topnavbar {
/*	float: left;
	left: 50%;*/
	position: relative;
	text-align: center;
	padding: 0;
	margin: 0;
	/*	margin: -21px 0;*/
	height: 35px;
	background-color: #FF6600;
}
#MenuBar1 {
/*width: 1100px;
margin: auto;*/
/*	float: left;
	left: 50%;*/
}
#header {
	/*	padding: 0 10px 0 20px;*/  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	text-align: center;
	background-color: #00CC33;
} 
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#mainContent {
	float: left;
	width: 100%;
	background-color: #999999;
	text-align: center;
	clear: both;
}
#leftbox {
	float:left;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #66CCFF;
}
#rightbox {
	float:right;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #FF3366;
}
#footer {
	clear: both;
	padding: 0 10px;
	text-align: center;
	background-color: #CC00CC;
} 
#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="oneColElsCtrHdr">
<p>body background set to black</p>
<div id="container">
<h1>#container</h1>
  <div id="header">
    <h1>#header</h1>
  <!-- end #header --></div>
  <div id="topnavbar">
<!--  	<h2>#topnavbar (MenuBar1 will be nested inside this div)</h2>-->
    <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>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
      <li><a href="#">Item 7</a></li>
      </ul>
  <!-- end #topnavbar --></div>
  <div id="mainContent">
  <h3>mainContent area</h3>
           <!-- <img src="Photos/Img_Placeholder_1000x669.jpg" width="1000" height="669" />-->
        <div id="leftbox">
     		leftbox
          <!--  <img src="Photos/Img_Placeholder_Left-Box_400x300.jpg" width="400" height="300" />-->            </div>
		<div id="rightbox">
    		rightbox
          <!--<img src="Photos/Img_Placeholder_Right-Box_400x300.jpg" width="400" height="300" /> -->
   	</div>
  <!-- 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>

Open in new window

Test-Page-Cannot-Center-MenuBar.jpg
0
qeng
Asked:
qeng
  • 5
  • 2
1 Solution
 
rafe_Commented:
that has a whole load of rather ugly hacks to make it center. scratch them all and go with this:

Set ul.MenuBarHorizontal's parent's width to 100% if it isn't already, and that should work in all browsers
ul.MenuBarHorizontal {
 width: 50em;
 margin: auto 0;
}

Open in new window

0
 
qengAuthor Commented:
@ rafe,
Thx for replying.
Yes there are a load of hacks in there which I'm commenting out as I go since they don't work.  Fortunately for your eyes, I'm not keeping all of the discarded ones in there.
I tried your solution and it gets close in IE7 but is still not centered (see attached file).  In FF3 it doesn't center the menubar at all (see attached file).
The parent container is #topnavbar.  I also set that to width: 100% as you suggest.
See revised html code attached.
The relevant part of the Spry Menu Bar's style sheet was changed as you suggested to:

ul.MenuBarHorizontal
{
/* position: relative;*/
/* right: 50%;*/
/*left: 50%;
 float: left;*/
/* margin: 0;*/
/*width: 100%;*/
width: 50em;
margin: auto 0;
 padding: 0;
 list-style-type: none;
 font-size: 100%;
 cursor: default;
/* text-align: center;*/
}

<!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" />
<title>Test Page - 1 Col Elastic w Horiz Nav Bar</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	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: #FFFFFF;
	background-color: #000000;
}
 
/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
#container {
	width: 1000px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0px;
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-color: #0000FF;
}
#topnavbar {
/*	float: left;
	left: 50%;*/
	position: relative;
	width: 100%;
	text-align: center;
	padding: 0;
	margin: 0;
	/*	margin: -21px 0;*/
	height: 35px;
	background-color: #FF6600;
}
#MenuBar1 {
/*width: 100%;
margin: auto;*/
/*	float: left;
	left: 50%;*/
}
#header {
	/*	padding: 0 10px 0 20px;*/  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	text-align: center;
	background-color: #00CC33;
} 
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#mainContent {
	float: left;
	width: 100%;
	background-color: #999999;
	text-align: center;
	clear: both;
}
#leftbox {
	float:left;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #66CCFF;
}
#rightbox {
	float:right;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #FF3366;
}
#footer {
	clear: both;
	padding: 0 10px;
	text-align: center;
	background-color: #CC00CC;
} 
#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="oneColElsCtrHdr">
<p>body background set to black</p>
<div id="container">
<h1>#container</h1>
  <div id="header">
    <h1>#header</h1>
  <!-- end #header --></div>
  <div id="topnavbar">
<!--  	<h2>#topnavbar (MenuBar1 will be nested inside this div)</h2>-->
    <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>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
      <li><a href="#">Item 7</a></li>
      </ul>
  <!-- end #topnavbar --></div>
  <div id="mainContent">
  <h3>mainContent area</h3>
           <!-- <img src="Photos/Img_Placeholder_1000x669.jpg" width="1000" height="669" />-->
        <div id="leftbox">
     		leftbox
          <!--  <img src="Photos/Img_Placeholder_Left-Box_400x300.jpg" width="400" height="300" />-->            </div>
		<div id="rightbox">
    		rightbox
          <!--<img src="Photos/Img_Placeholder_Right-Box_400x300.jpg" width="400" height="300" /> -->
   	</div>
  <!-- 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>

Open in new window

Test-Page-MenuBar-Off-Center-IE7.jpg
Test-Page-MenuBar-Off-Center-FF3.jpg
0
 
rafe_Commented:
many apologies, when i said margin: auto 0 i got the properties around the wrong way - it should be margin: 0 auto;

i've copied the code and played around with it - i don't have all of the css but it seemed to me that specifying the width as 100% wasn't stretching it to the full width of its parent container: specify the widths of all of your divs in pixels and it will work no problems.

let me know how it goes
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
qengAuthor Commented:
@ rafe:
Thx for getting back.  I'm still stuck however:
The margin parameter swap didn't fix it either.  Nor did using various width parameters (e.g. none, auto, matching container width in px, em).  Obviously i can (probably) fudge it with exactly the right pixel or em value (essentially what you are suggesting) to cause it center but you can appreciate that this is both very fragile between browsers or at different resolutions as well as the fact that it doesn't work for practical purposes, see below.
Setting the width of all my divs in pixels would totally defeat the purpose of my page design.  The idea is to have an elastic design for several sections of the page (although I admit I did set my main container width to 1000px intentionally instead of ems).
The big problem with the approach you're suggesting is that everytime I add or delete an item to the menu bar, or change a text label inside a menu button (e.g. change 'Item 7' to 'Contact Us', the centering of the menu bar is then lost.
Using margin 0,auto as you suggest I think is part of the answer but it seems to me that setting the width of the ul.MenuBarHorizontal container is what is getting us in trouble.  To illustrate, I set the background color of ul.MenuBarHorizontal to yellow so you could see what I mean.  Presently in this example its width is set to 50em per your earlier suggestion.  You'll see in the attached screengrab that this 50em width is in fact being centered correctly withing the page but it doesn't correspond to the actual total width of the menu items (which will vary depending on the number of items and the length of the text for each item).  I've tried different ways of setting the width for ul.MenuBarHorizontal (such as auto, 100%, or setting it to the container width).  Understandably, width: 100% or equal to container width create a situation where ul.MenuBarHorizontal becomes the same width as its parent #topnavbar so ... there is no room to center it.
Somehow I need to be able to specify the width of ul.MenuBarHorizontal so it can stretch or shrink depending on the number and length of menu bar items (I've tried removing any width reference but that didn't work for me ... perhaps i needed to an another rule elsewhere to make this work) and then cause the entire ul.MenuBarHorizontal container to be centered within its parent #topnavbar.
I'm not sure it one of the floats somewhere or one of the IE hacks is forcing ul.MenuBarHorizontal left within #topnavbar when I remove a specific width setting or try to set it to auto.
I've embedded the code of my previously external SpryMenuBarHorizontal.css stylesheet in the Test Page html this time to make it easier to track down hopefully.
Sorry for the long explanation.  Trying to give as much relevant feedback as possible.
Thx.

<!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" />
<title>Test Page - 1 Col Elastic w Horiz Nav Bar</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	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: #FFFFFF;
	background-color: #000000;
}
 
/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
#container {
	width: 1000px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0px;
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-color: #0000FF;
}
#topnavbar {
/*i use this div to provide flexibility in creating different backgrounds around the menu bar and in an attempt to gain better control over the position of the menu bar on the page*/ 
/*	float: left;
	left: 50%;*/
	position: relative;
/*	width: auto;*/
/*	width: 100%;*/
/*	width: 1000px;*/
	text-align: center;
	padding: 0;
	margin: 0, auto;
/*	margin: 0;*/
	/*	margin: -21px 0;*/
	height: 35px;
	background-color: #FF6600;
}
#MenuBar1 {
/*creating this class was my attempt at trying to center the container holding the menu buttons*/
/*it seems that the width and margin settings for the menu bar can be set here or in the ul.MenuBarHorizontal rule*/
/*width: auto;*/
/*width: 100%;*/
/*width: 50em;*/
/*margin: 0 auto;*/
/*	float: left;
	left: 50%;*/
}
#header {
	/*	padding: 0 10px 0 20px;*/  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	text-align: center;
	background-color: #00CC33;
} 
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#mainContent {
	float: left;
	width: 100%;
	background-color: #999999;
	text-align: center;
	clear: both;
}
#leftbox {
	float:left;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #66CCFF;
}
#rightbox {
	float:right;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #FF3366;
}
#footer {
	clear: both;
	padding: 0 10px;
	text-align: center;
	background-color: #CC00CC;
} 
#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 */
}
-->
/*-----------------------------------------------------------------
SpryMenuBarHorizontal.css Code Embeded Below
-----------------------------------------------------------------*/
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, a given width box (auto width doesn't let the browser center the menu) with auto margin and zero padding 
Styles controlled by this rule:
background-color: color of box containing group of main menu buttons
width:  horizontal width of box containing group of main menu buttons
*/
ul.MenuBarHorizontal
{
	/*	position: relative;*/
	/*	right: 50%;*/
	/*left: 50%;
	float: left;*/
	/*	margin: 0;*/
/*	width: auto;*/
	/*width: 100%;*/
	width: 50em;
	/*width: 1000px;*/
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	background-color: #FFFF00;/*	text-align: center;*/
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 7em;
	float: left;
	white-space: nowrap;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em).
 
Submenu styles controlled by this rule:
background-color: color of box containing group of submenu buttons under main menu box
*/
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 90%;
	z-index: 1020;
	cursor: default;
	width: 11em; /*horiz width of box containing submenu buttons*/
	position: absolute;
	text-align: left;
	margin: 0% 0 0 20px;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Submenu item containers can be set to a different fixed width from parent and are aligned left.
 
Submenu styles controlled by this rule:
 
margin-left: horizontal pos'n of submenu buttons within their box relative to the main menu
margin-top:  vertical pos'n of submenu buttons relative to the main menu and between submenu items
background-color:  does not seem to control the button or button box color; bckgd behind perhaps?
*/
ul.MenuBarHorizontal ul li
{
	width: 13em; /*horizontal width of submenu buttons*/
	text-align: left;
	background-color: transparent;
	float: none;
}
/* Sub-submenus should appear slightly overlapping to the right (97%) and even with the submenu item (0%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: 15% 0 0 20px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}
 
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
/*	border: 1px solid #FF0000;*/
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #666666;
	/*	padding: 0.5em 0.75em;*/
	padding: 0.4em;
	/*	color: #CCCCCC;*/
	color: #FFFFFF;
	border: 2px solid #000000;
	text-decoration: none;
	text-align: center;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
}
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
/* Set the alignment back to left for any
 * menu item links that are in a sub menu.
 */
ul.MenuBarHorizontal ul a {
	padding: 0.5em; /*sets the padding around submenu link text*/
	text-align: left; /*aligns submenu link text*/
	background-color: #666666; /*background color of submenu buttons*/
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown_light_grey.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown_light_grey.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: #FFF;
	}
}
/*---------------------------------------------------------------*/
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!--<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />-->
</head>
 
<body class="oneColElsCtrHdr">
<p>body background set to black</p>
<div id="container">
<h1>#container</h1>
  <div id="header">
    <h1>#header</h1>
  <!-- end #header --></div>
  <div id="topnavbar">
<!--  	<h2>#topnavbar (MenuBar1 will be nested inside this div)</h2>-->
    <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>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
      </ul>
  <!-- end #topnavbar --></div>
  <div id="mainContent">
  <h3>mainContent area</h3>
           <!-- <img src="Photos/Img_Placeholder_1000x669.jpg" width="1000" height="669" />-->
        <div id="leftbox">
     		<p>#leftbox</p>
     		<p>(troubleshooting color code info below)</p>
     		<p>#topnavbar
     		  <!--  <img src="Photos/Img_Placeholder_Left-Box_400x300.jpg" width="400" height="300" />-->= orange</p>
     		<p>ul.MenuBarHorizontal = yellow</p>
     		<p>&nbsp;</p>
        </div>
		<div id="rightbox">
    		<p>#rightbox</p>
          <!--<img src="Photos/Img_Placeholder_Right-Box_400x300.jpg" width="400" height="300" /> -->
   	</div>
  <!-- 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>

Open in new window

Test-Page-MenuBar-Off-Center-IE7.jpg
0
 
qengAuthor Commented:
@ rafe and @yessirnosir (hope you're reading this)
yessirnosir had previously provided a solution to this problem which was very close to solving it.  His approach which I've recreated in the code below uses floats in the parent container #topnavbar and in ul.MenuBarHorizontal.
The reason I got back into a problem with it was trying to correct a related problem in the solution yessirnosir offered (perhaps I inadvertently created this problem not following his recommendations properly).
With his approach I can get the menubar itself correctly centered (works in both IE7 and FF3) but the parent div #topnavbar (orange background to troubleshoot) sticks out to the right of my page causing the page to be wider than i intend it to be and forcing as a result the appearance of a horizontal scroll bar (see attached screengrab).
 The html code below is updated to the solution yessirnosir offered (except I didn't remove the width: 7 em on ul.MenuBarHorizontal li as he had done in his example) so as to force all of my menu buttons to be the same width.
I'm still trying to troubleshoot this if anyone can help.

<!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" />
<title>Test Page - 1 Col Elastic w Horiz Nav Bar</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	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: #FFFFFF;
	background-color: #000000;
}
 
/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
#container {
	width: 1000px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0px;
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-color: #0000FF;
}
#topnavbar {
/*i use this div to provide flexibility in creating different backgrounds around the menu bar and in an attempt to gain better control over the position of the menu bar on the page*/ 
	float: left;
	left: 50%;
	position: relative;
/*	width: auto;*/
/*	width: 100%;*/
/*	width: 1000px;*/
	text-align: center;
	padding: 0;
/*	margin: 0, auto;*/
	margin: 0;
	/*	margin: -21px 0;*/
	height: 35px;
	background-color: #FF6600;
}
#MenuBar1 {
/*creating this class was my attempt at trying to center the container holding the menu buttons*/
/*it seems that the width and margin settings for the menu bar can be set here or in the ul.MenuBarHorizontal rule*/
/*width: auto;*/
/*width: 100%;*/
/*width: 50em;*/
/*margin: 0 auto;*/
/*	float: left;
	left: 50%;*/
}
#header {
	/*	padding: 0 10px 0 20px;*/  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	text-align: center;
	background-color: #00CC33;
} 
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#mainContent {
	float: left;
	width: 100%;
	background-color: #999999;
	text-align: center;
	clear: both;
}
#leftbox {
	float:left;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #66CCFF;
}
#rightbox {
	float:right;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #FF3366;
}
#footer {
	clear: both;
	padding: 0 10px;
	text-align: center;
	background-color: #CC00CC;
} 
#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 */
}
-->
/*-----------------------------------------------------------------
SpryMenuBarHorizontal.css Code Embeded Below
-----------------------------------------------------------------*/
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, a given width box (auto width doesn't let the browser center the menu) with auto margin and zero padding 
Styles controlled by this rule:
background-color: color of box containing group of main menu buttons
width:  horizontal width of box containing group of main menu buttons
*/
ul.MenuBarHorizontal
{
		position: relative;
		right: 50%;
/*	left: 50%;*/
		float: left;
	/*	margin: 0;*/
/*	width: auto;*/
	/*width: 100%;*/
/*	width: 50em;*/
	/*width: 1000px;*/
/*	margin: 0 auto;*/
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	background-color: #FFFF00;/*	text-align: center;*/
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 7em;
	float: left;
	white-space: nowrap;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em).
 
Submenu styles controlled by this rule:
background-color: color of box containing group of submenu buttons under main menu box
*/
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 90%;
	z-index: 1020;
	cursor: default;
	width: 11em; /*horiz width of box containing submenu buttons*/
	position: absolute;
	text-align: left;
	margin: 0% 0 0 20px;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Submenu item containers can be set to a different fixed width from parent and are aligned left.
 
Submenu styles controlled by this rule:
 
margin-left: horizontal pos'n of submenu buttons within their box relative to the main menu
margin-top:  vertical pos'n of submenu buttons relative to the main menu and between submenu items
background-color:  does not seem to control the button or button box color; bckgd behind perhaps?
*/
ul.MenuBarHorizontal ul li
{
	width: 13em; /*horizontal width of submenu buttons*/
	text-align: left;
	background-color: transparent;
	float: none;
}
/* Sub-submenus should appear slightly overlapping to the right (97%) and even with the submenu item (0%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: 15% 0 0 20px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}
 
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
/*	border: 1px solid #FF0000;*/
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #666666;
	/*	padding: 0.5em 0.75em;*/
	padding: 0.4em;
	/*	color: #CCCCCC;*/
	color: #FFFFFF;
	border: 2px solid #000000;
	text-decoration: none;
	text-align: center;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
}
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
/* Set the alignment back to left for any
 * menu item links that are in a sub menu.
 */
ul.MenuBarHorizontal ul a {
	padding: 0.5em; /*sets the padding around submenu link text*/
	text-align: left; /*aligns submenu link text*/
	background-color: #666666; /*background color of submenu buttons*/
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown_light_grey.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown_light_grey.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: #FFF;
	}
}
/*---------------------------------------------------------------*/
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!--<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />-->
</head>
 
<body class="oneColElsCtrHdr">
<p>body background set to black</p>
<div id="container">
<h1>#container</h1>
  <div id="header">
    <h1>#header</h1>
  <!-- end #header --></div>
  <div id="topnavbar">
<!--  	<h2>#topnavbar (MenuBar1 will be nested inside this div)</h2>-->
    <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>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
      </ul>
  <!-- end #topnavbar --></div>
  <div id="mainContent">
  <h3>mainContent area</h3>
           <!-- <img src="Photos/Img_Placeholder_1000x669.jpg" width="1000" height="669" />-->
        <div id="leftbox">
     		<p>#leftbox</p>
     		<p>(troubleshooting color code info below)</p>
     		<p>#topnavbar
     		  <!--  <img src="Photos/Img_Placeholder_Left-Box_400x300.jpg" width="400" height="300" />-->= orange</p>
     		<p>ul.MenuBarHorizontal = yellow</p>
     		<p>&nbsp;</p>
        </div>
		<div id="rightbox">
    		<p>#rightbox</p>
          <!--<img src="Photos/Img_Placeholder_Right-Box_400x300.jpg" width="400" height="300" /> -->
   	</div>
  <!-- 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>

Open in new window

Test-Page-MenuBar-Off-Center-IE7.jpg
0
 
yessirnosirCommented:
Hi geng, re:  "@yessirnosir (hope you're reading this) "  --- sorry! I quit my EE addiction cold turkey in early February -- it was fun but was eating up too many hours, so I turned off my e-mail alerts and walked away from my computer, shaking violently from EE-withdrawl!!!  Just checked back today for the first time in a while and saw your post.

If you are still working on this, you can generally fix the overhang/horizontal scrollbar problem by wrapping the menu with a container div that includes "overflow:hidden".   Modified code attached.  The key bit is this:
#menuwrap {
   width:100%;
   overflow:hidden;
   position:relative;
}
Only the overflow:hidden is necessary for FF, but the width:100% and position:relative are needed for IE.

Hope that helps.
<!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" />
<title>Test Page - 1 Col Elastic w Horiz Nav Bar</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	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: #FFFFFF;
	background-color: #000000;
}
 
/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
#container {
	width: 1000px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0px;
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-color: #0000FF;
}
#menuwrap {
   width:100%;
   overflow:hidden;
   position:relative;
}
 
#topnavbar {
/*i use this div to provide flexibility in creating different backgrounds around the menu bar and in an attempt to gain better control over the position of the menu bar on the page*/ 
	float: left;
	left: 50%;
	position: relative;
/*	width: auto;*/
/*	width: 100%;*/
/*	width: 1000px;*/
	text-align: center;
	padding: 0;
/*	margin: 0, auto;*/
	margin: 0;
	/*	margin: -21px 0;*/
	height: 35px;
	background-color: #FF6600;
}
#MenuBar1 {
/*creating this class was my attempt at trying to center the container holding the menu buttons*/
/*it seems that the width and margin settings for the menu bar can be set here or in the ul.MenuBarHorizontal rule*/
/*width: auto;*/
/*width: 100%;*/
/*width: 50em;*/
/*margin: 0 auto;*/
/*	float: left;
	left: 50%;*/
}
#header {
	/*	padding: 0 10px 0 20px;*/  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	text-align: center;
	background-color: #00CC33;
} 
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#mainContent {
	float: left;
	width: 100%;
	background-color: #999999;
	text-align: center;
	clear: both;
}
#leftbox {
	float:left;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #66CCFF;
}
#rightbox {
	float:right;
	margin: 10px;
	width: 400px;
	height: 300px;
	background-color: #FF3366;
}
#footer {
	clear: both;
	padding: 0 10px;
	text-align: center;
	background-color: #CC00CC;
} 
#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 */
}
-->
/*-----------------------------------------------------------------
SpryMenuBarHorizontal.css Code Embeded Below
-----------------------------------------------------------------*/
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, a given width box (auto width doesn't let the browser center the menu) with auto margin and zero padding 
Styles controlled by this rule:
background-color: color of box containing group of main menu buttons
width:  horizontal width of box containing group of main menu buttons
*/
ul.MenuBarHorizontal
{
		position: relative;
		right: 50%;
/*	left: 50%;*/
		float: left;
	/*	margin: 0;*/
/*	width: auto;*/
	/*width: 100%;*/
/*	width: 50em;*/
	/*width: 1000px;*/
/*	margin: 0 auto;*/
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	background-color: #FFFF00;/*	text-align: center;*/
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 7em;
	float: left;
	white-space: nowrap;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em).
 
Submenu styles controlled by this rule:
background-color: color of box containing group of submenu buttons under main menu box
*/
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 90%;
	z-index: 1020;
	cursor: default;
	width: 11em; /*horiz width of box containing submenu buttons*/
	position: absolute;
	text-align: left;
	margin: 0% 0 0 20px;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Submenu item containers can be set to a different fixed width from parent and are aligned left.
 
Submenu styles controlled by this rule:
 
margin-left: horizontal pos'n of submenu buttons within their box relative to the main menu
margin-top:  vertical pos'n of submenu buttons relative to the main menu and between submenu items
background-color:  does not seem to control the button or button box color; bckgd behind perhaps?
*/
ul.MenuBarHorizontal ul li
{
	width: 13em; /*horizontal width of submenu buttons*/
	text-align: left;
	background-color: transparent;
	float: none;
}
/* Sub-submenus should appear slightly overlapping to the right (97%) and even with the submenu item (0%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: 15% 0 0 20px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}
 
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
/*	border: 1px solid #FF0000;*/
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #666666;
	/*	padding: 0.5em 0.75em;*/
	padding: 0.4em;
	/*	color: #CCCCCC;*/
	color: #FFFFFF;
	border: 2px solid #000000;
	text-decoration: none;
	text-align: center;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
}
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
/* Set the alignment back to left for any
 * menu item links that are in a sub menu.
 */
ul.MenuBarHorizontal ul a {
	padding: 0.5em; /*sets the padding around submenu link text*/
	text-align: left; /*aligns submenu link text*/
	background-color: #666666; /*background color of submenu buttons*/
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown_light_grey.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown_light_grey.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: #FFF;
	}
}
/*---------------------------------------------------------------*/
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!--<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />-->
</head>
 
<body class="oneColElsCtrHdr">
<p>body background set to black</p>
<div id="container">
<h1>#container</h1>
  <div id="header">
    <h1>#header</h1>
  <!-- end #header --></div>
<div id="menuwrap">
 
  <div id="topnavbar">
<!--  	<h2>#topnavbar (MenuBar1 will be nested inside this div)</h2>-->
    <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>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
      </ul>
  <!-- end #topnavbar --></div>
  </div>
  <div id="mainContent">
  <h3>mainContent area</h3>
           <!-- <img src="Photos/Img_Placeholder_1000x669.jpg" width="1000" height="669" />-->
        <div id="leftbox">
     		<p>#leftbox</p>
     		<p>(troubleshooting color code info below)</p>
     		<p>#topnavbar
     		  <!--  <img src="Photos/Img_Placeholder_Left-Box_400x300.jpg" width="400" height="300" />-->= orange</p>
     		<p>ul.MenuBarHorizontal = yellow</p>
     		<p>&nbsp;</p>
        </div>
		<div id="rightbox">
    		<p>#rightbox</p>
          <!--<img src="Photos/Img_Placeholder_Right-Box_400x300.jpg" width="400" height="300" /> -->
   	</div>
  <!-- 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>

Open in new window

0
 
qengAuthor Commented:
Yessirnosir,
Glad you came back for a little EE fix.
Your recommendations fixed my issue alright.  I couldn't seem to get it to across browsers.
Thx a lot for posting back the code.  Just makes it a lot easier/quicker to check.
Cheers,
Mike
 
 
0
 
qengAuthor Commented:
Thx Yessirnosir.  I posted a quick reply.  Worked like a charm.  Cheers.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now