Horizontal spry menu bar not aligned with sub menu items in IE7; CSS/Dreamweaver/Spry

In Dreamweaver CS3, if you insert a horizontal Spry menu bar, the top level menu items are aligned left. If you change them to align:center, the sub menu items (which default to left:auto) appear properly in Firefox but not in IE7 (of course...).

If you replace left:auto with position:relative and left:0, the submenu items appear in the right place in both browsers - but their border & background color disappear in Firefox. Close but no cigar... I can't seem to come up with a rule that will satisfy both browsers.

CSS attached. Any help would be much appreciated!
/*******************************************************************************
 
 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
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
/* 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;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: 120px;
	float: left;
	padding:0;
}
/* 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: 80%;
	z-index: 1020;
	cursor: default;
	width: 118px;
	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 */
/*IF THIS IS SET TO LEFT:AUTO; SUBMENUS APPEAR PROPERLY IN FIREFOX BUT OFF TO THE RIGHT IN IE7.
IF IT IS SET TO POSITION:RELATIVE; + LEFT:0; SUBMENUS APPEAR IN THE RIGHT PLACE IN BOTH BROWSERS, BUT SHOW NO BORDER OR BACKGROUND IN FIREFOX.*/
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	position:relative;
	left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 118px;
}
/* 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;
}

Open in new window

LVL 4
slovisaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

slovisaAuthor Commented:
NOTE: the position:relative; + left:0; solution is NOT headed in the right direction. When you use relative positioning it causes the submenu items to push down other divs in IE6... So we're back to left:auto;, looking for a way to get IE 6+7 to line up the submenu items directly below their parents.

POINTS INCREASED.
BadotzCommented:
Not to br impertinent, but shouldn't you be asking this in either a Dreamweaver or spry forum?
slovisaAuthor Commented:
This is a CSS layout issue, created by Dreamweaver. I have it listed in those two zones - I figure that makes sense. If there's a better zone, please let me know and I'll ask an Admin to add a third zone to my question. Thanks.
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

BadotzCommented:
Actually, I meant *outside* of EE.
slovisaAuthor Commented:
I don't see why EE's CSS & Dreamweaver zones are less relevant than any of the other zones. I've received plenty of helpful feedback before (although you're really sidetracking this question for me...). Any question in any zone might be answered elsewhere. I have looked elsewhere and have been unable to find a solution - that's why I'm posting. If you're aware of helpful information specific to this issue in another forum, I'm all ears. It's not uncommon to point EE users to solutions posted in other forums. *Helpful* feedback is what makes this community successful.

Any helpful / constructive feedback on this issue would still be much appreciated!
shiraztiCommented:
If you're using <a> tags in between <li> you can keep the css styles as default and specify a style for <a>.

ul.MenuBarHorizontal a {
      text-align:center;
}
ul.MenuBarHorizontal li
{
        margin: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        cursor: pointer;
        width: 120px;
        float: left;
        padding:0;
	text-align:left;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* following styles should be placed on the very bottom of SpryMenuBarHorizontal.css */
ul.MenuBarHorizontal a {
	text-align:center;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
slovisaAuthor Commented:
Yes! It was just that simple - good thinking. You're so good at cutting through the clutter, to the heart of the matter. You wouldn't believe how many unanswered threads I've read about that one...

Thanks so much for your help (yet again). Now get some sleep! :)
shiraztiCommented:
Hi slovisa,
I'm glad!! Thank a lot for the grading ;-)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.