?
Solved

Spry Menu Bar Alignment Question

Posted on 2012-09-22
15
Medium Priority
?
597 Views
Last Modified: 2012-09-22
Please check out www.amj4silverlake.org

The menu items in the menu are not centered in each of their boxes.  I'm trying to find out where the code that needs centering is.  Can you please help.  I'm including the spry css code:


@charset "UTF-8";

ul.MenuBarHorizontal
{
      padding: 0;
      list-style-type: none;
      font-size: 85%;
      cursor: default;
      width: 660px;
      margin-left: 340px;
      font-family: Numans, Verdana, Geneva, sans-serif;
      margin-top: 0;
      margin-right: 0;
      margin-bottom: 0;
}
ul.MenuBarActive
{
      z-index: 1000;
}
ul.MenuBarHorizontal li
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      position: relative;
      text-align: left;
      cursor: pointer;
      width: 8em;
      float: left;
}
ul.MenuBarHorizontal ul
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      z-index: 1020;
      cursor: default;
      width: 8.2em;
      position: absolute;
      left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
      left: auto;
}
ul.MenuBarHorizontal ul li
{
      width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
      position: absolute;
      margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
      left: auto;
      top: 0;
}
ul.MenuBarHorizontal ul
{
      border: 0px solid #CCC;
}
ul.MenuBarHorizontal a
{
      display: block;
      cursor: pointer;
      background-color: #cc9966;
      padding: 0.5em 0.75em;
      color: #333;
      text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
      background-color: #669999;
      color: #669999;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
      background-color: #333366;
      color: #f7f4ff;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
      background-image: url(SpryMenuBarDown.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
      background-image: url(SpryMenuBarRight.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
      background-image: url(SpryMenuBarDownHover.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
      background-image: url(SpryMenuBarRightHover.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
/* 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: #33C;
      }
}
0
Comment
Question by:Revolution9
  • 8
  • 7
15 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 1500 total points
ID: 38424992
Add
text-align: center;

to the css in
ul.MenuBarHorizontal a {
0
 

Author Comment

by:Revolution9
ID: 38425058
0
 
LVL 58

Expert Comment

by:Gary
ID: 38425218
Can you change it in the link so I can see it for real because I've tested it again in IE, Chrome and FF and it works fine
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Revolution9
ID: 38425451
http://www.amj4silverlake.org/

Please look at it quickly, I have to change the css back to the way it was.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38425463
That page is working perfectly
Oops problem in FF will look now
0
 
LVL 58

Expert Comment

by:Gary
ID: 38425468
Need a float on the li

ul.MenuBarHorizontal li {
float:left
0
 

Author Comment

by:Revolution9
ID: 38425474
I've got that, re-uploading it.

No change.

http://www.amj4silverlake.org/

Revised Spry Code:

@charset "UTF-8";

ul.MenuBarHorizontal
ul.MenuBarHorizontal
{
      padding: 0;
      list-style-type: none;
      font-size: 85%;
      cursor: default;
      width: 660px;
      margin-left: 340px;
      font-family: Numans, Verdana, Geneva, sans-serif;
      margin-top: 0;
      margin-right: 0;
      margin-bottom: 0;
}
ul.MenuBarActive
{
      z-index: 1000;
}
ul.MenuBarHorizontal li
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      position: relative;
      text-align: left;
      cursor: pointer;
      width: 8em;
      float: left;
}
ul.MenuBarHorizontal ul
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      z-index: 1020;
      cursor: default;
      width: 8.2em;
      position: absolute;
      left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
      left: auto;
}
ul.MenuBarHorizontal ul li
{
      width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
      position: absolute;
      margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
      left: auto;
      top: 0;
}
ul.MenuBarHorizontal ul
{
      border: 0px solid #CCC;
}
ul.MenuBarHorizontal a
{
      display: block;
      cursor: pointer;
      background-color: #cc9966;
      padding: 0.5em 0.75em;
      color: #333;
      text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
      background-color: #669999;
      color: #669999;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
      background-color: #333366;
      color: #f7f4ff;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
      background-image: url(SpryMenuBarDown.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
      background-image: url(SpryMenuBarRight.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
      background-image: url(SpryMenuBarDownHover.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
      background-image: url(SpryMenuBarRightHover.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
/* 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: #33C;
      }
}
0
 

Author Comment

by:Revolution9
ID: 38425477
I just noticed when I pasted the code:

I changed this:

ul.MenuBarHorizontal li
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      position: relative;
      text-align: left;
      cursor: pointer;
      width: 8em;
      float: left;
}

to this:

ul.MenuBarHorizontal li
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      position: relative;
      text-align: center;
      cursor: pointer;
      width: 8em;
      float: left;
}

FIXED!!!
0
 

Author Closing Comment

by:Revolution9
ID: 38425480
correct except the text: center should go in ul.MenuBarHorizontal li

Thanks for at least pointing me in the right direction.  I learned because of it, and that's a good thing!
0
 
LVL 58

Expert Comment

by:Gary
ID: 38425486
You seem to have some IE specific css - shouldn't need it for this type of menu
But you have a positioning error in IE - there is a blue bar at the top of the menu
0
 

Author Comment

by:Revolution9
ID: 38425507
should I post another EE question, or can you slip me the solution?
0
 
LVL 58

Expert Comment

by:Gary
ID: 38425509
Actually IE9 was fine it was IE8 not showing correctly

Remove/disable the class
ul.MenuBarHorizontal li.MenuBarItemIE

You don't need it for this menu and it fixes the blue line problem
0
 
LVL 58

Expert Comment

by:Gary
ID: 38425543
On a personally aesthetic viewpoint I would change your fonts - the ones you are using look very scratchy almost DOS like.
When placing fonts on coloured backgrounds you have to be careful of the ones you use - they may look great on a white background but don't always suit a coloured background.
0
 

Author Comment

by:Revolution9
ID: 38425594
Thanks.  I'll look into the font issue.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
How does storytelling impact the web? What goes into a great story on the web? And how can it be used for marketing purposes? All of these questions will be answered.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month9 days, 12 hours left to enroll

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question