asked on

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

slovisa

ASKER

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.

Badotz

Not to br impertinent, but shouldn't you be asking this in either a Dreamweaver or spry forum?

slovisa

ASKER

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.

Badotz

Actually, I meant *outside* of EE.

slovisa

ASKER

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!

ASKER CERTIFIED SOLUTION

shirazti

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

slovisa

ASKER

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! :)

shirazti

Hi slovisa,
I'm glad!! Thank a lot for the grading ;-)