Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1392
  • Last Modified:

Spry Menu Submenu's appear to the right

I have a site where I created a Spry horizontal menu.   In order to get some clarity, I made:

ul.MenuBarHorizontal li text-align to "center".

However, when I do that, the right part of the submenu opens in the center as well - I need it to open directly under the top level cell, not off center.

How do I do this?
@charset "UTF-8";
 
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
	margin: 0;
}
/* 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%;
	text-align: left;
	position: relative;
	cursor: pointer;
	width: 7.4em;
	float: left;
}
ul.MenuBarHorizontal2 li
{
	text-align: left;
}
/* 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) */
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;
	}
 
/* 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;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* 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 #CCC;
	
}
ul.MenuBarHorizontal li
{
	border: 1px solid #CCC;
}
 
ul.MenuBarHorizontal2 li
{
	border: 0px;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #0081C0;
	padding: 0.4em 0.9em;
	color: #FFF;
	font: bold 11px/11px arial, helvetica, sans-serif;
	text-decoration: none;
}
ul.MenuBarHorizontal2 a
{
	display: block;
	cursor: pointer;
	background-color: #FFFFFF;
	padding: 0.3em 0.9em;
	color: #000000;
	font: bold 11px/11px arial, helvetica, sans-serif;
	text-decoration: none;
}
/* 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: #0081C0;
	color: #800040;
}
 
/* 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: #0081C0;
	color: #800040;
}
 
 
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
 
/* 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.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(SpryMenuBarRight.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(SpryMenuBarRightHover.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;
}
/* 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;
	}
}

Open in new window

0
mmatzko
Asked:
mmatzko
  • 5
  • 5
1 Solution
 
Jason C. LevineNo oneCommented:
Hi mmatzko,

Can you post a link to a page that has the undesired effect?  I just tried creating a menu bar and changed the text align as you specify and all that I see is that the text centered...
0
 
mmatzkoAuthor Commented:
Do your submenu's come down directly below the top cell?

Here is a link to our test site - you can see how the text is centered on the top level, the text is left on the sub menu's however it drops down in the center of the top level.

http://www.codingplus.biz

0
 
mmatzkoAuthor Commented:
Do your submenu's come down directly below the top cell?

Here is a link to our test site - you can see how the text is centered on the top level, the text is left on the sub menu's however it drops down in the center of the top level.

http://www.codingplus.biz

0
Industry Leaders: 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!

 
Jason C. LevineNo oneCommented:
Okay, I only see the problem in IE 7.  Firefox looks fine.  This is not going to be easy to figure out...
0
 
mmatzkoAuthor Commented:
Agreed - I noticed that later today.    I think it might have something to do with the IE hack it the bottom of the spry CSS.  

0
 
Jason C. LevineNo oneCommented:
Did you fix it?  I started taking a look at it again tonight and your site doesn't do the same thing.
0
 
mmatzkoAuthor Commented:
I didn't fix it.   Since we are ready to update production, I had to settle for putting the top level aligned Left - then it works.  

what doesn't work is if the top level is Center and the sub menu's are Left .  I'm still hoping for an answer on that one - it is apparently an IE 7 thing - a lot of the CSS sites which have horizontal menu's only support IE6 . . and there are a lot of people with similar problems - although it doesn't appear to be a Spry thing.
0
 
Jason C. LevineNo oneCommented:
No, it isn't the spry part, it is the CSS.

For what it's worth, I created a test page using the CSS you posted originally and it appeared to work fine in IE 7...
0
 
mmatzkoAuthor Commented:
Hmmm. . .so it may be something else in the page - maybe something to do with a width element.  I'll take a look and post it if I find anything.
0
 
Jason C. LevineNo oneCommented:
Or it could be an interaction between the existing style and the spry styles...
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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