Horizontal tabbed menu problem

[caenicus]

Hello all,

I am currently in quite a pickle. I recently developed a horizontal tabbed menu using CSS and javascript. Everything appears to show up fine in Firefox, but when I test it in Safari and Internet Explorer, the sub-navigation items and background (in the body, not the menu) sift to the right. I can't for the life of me figure out what went wrong. I have pasted the PHP, CSS, and javascript codes below. Perhaps you guys can help me spot my problem?

PHP:

		<div id="main-menu">
			<ul>
				<li onmouseover="openSubmenu('navAbout', 'subAbout');" id="navAbout">
					<a href="#" title="About">About ITS</a>
					<ul class="subnav" id="subAbout">
						<li id="subAbout-computersupport"><a href="#" title="About Computer Support">Computer Support</a></li>
						<li id="subAbout-media"><a href="#" title="About Media Services">Media Services</a></li>
						<li id="subAbout-printing"><a href="#" title="About Printing">Printing &amp; Plotting</a></li>
						<li id="subAbout-webteam"><a href="#" title="About Web Team">Web Team</a></li>
						<li id="subAbout-contact"><a href="#" title="Contact Information">Contact Us</a></li>
					</ul>
				</li>

			<li onmouseover="openSubmenu('navNews', 'subNews');" id="navNews">
				<a href="#">News &amp; Events</a>
				<ul class="subnav" id="subNews">
				</ul>
			</li>

			<li onmouseover="openSubmenu('navPolicies', 'subPolicies');" id="navPolicies">
				<a href="#" title="Policies">Policies &amp; Procedures</a>
				<ul class="subnav" id="subPolicies">
					<li id="subSupport-computersupport"><a href="#" title="Policies - Computer">Computer</a></li>
					<li id="subSupport-media"><a href="#" title="Media Policies">Media</a></li>
					<li id="subSupport-web"><a href="#" title="Web Policies">Web</a></li>
				</ul>
			</li>

			<li onmouseover="openSubmenu('navServices', 'subServices');" id="navServices">
				<a href="#" title="Services">Services</a>
				<ul class="subnav" id="subServices">
					<li id="subAbout-computersupport"><a href="#" title="Computer Support Services">Computer Support</a></li>
					<li id="subAbout-consulting"><a href="#" title="Consulting &amp; Professional Services">Consulting &amp; Professional Services</a></li>
					<li id="subAbout-media"><a href="#" title="Media Services">Media Services</a></li>
					<li id="subAbout-printing"><a href="#" title="About Printing">Printing &amp; Plotting</a></li>
					<li id="subAbout-webteam"><a href="#" title="Web Team Services">Web Team Services</a></li>
				</ul>
			</li>

			<li onmouseover="openSubmenu('navSupport', 'subSupport');" id="navSupport">
				<a href="#" title="Technical Support">Technical Support</a>
				<ul class="subnav" id="subSupport">
					<li id="subSupport-computersupport"><a href="#" title="Computer Support">Computer Support</a></li>
					<li id="subSupport-documentation"><a href="#" title="Documentation">Documentation</a></li>
					<li id="subSupport-downloads"><a href="#" title="Downloads">Downloads</a></li>
					<li id="subSupport-web"><a href="#" title="Web Support">Web Support</a></li>
				</ul>
			</li>
  		</ul>
	</div>

CSS:

/* Main Menu */
#menu-container {
    width: 860px;
    float: left;
    margin: 26px 0 0 0;
}

#menu-container .ammark {
    text-align: right;
    padding: 0 10px 3px;
}

#main-menu {
    width: 838px;
    height: 52px;
    background: transparent url('../images/menu-bg.png') top center no-repeat;
    float:right;
    position: relative;
}

#main-menu {
	margin: 0;
    margin-top: 0px;
    padding-top: 14px;
	text-transform: lowercase;
	font-size: 1em;
	color: 000;
}

#main-menu ul li a:link,
#main-menu ul li a:visited,
#main-menu ul li a:hover,
#main-menu ul li a:active {
	text-decoration: none;
	margin:	0;
	padding: 10px 15px 10px 15px;
}

#main-menu ul {
    position: relative;
    display: inline;
    border: none;
    list-style: none;
    height: 50%;
    width: 100%;
    padding-left: 4px;
    line-height: 1;
}

#main-menu ul li {
    margin: 0;
    padding: 13px 0px 14px 0px;
    border: none;
    display: inline;
}

#main-menu ul li:hover,
#main-menu ul li.Active {
	background-color: #728DA2;
}

/** END MAIN NAVIGATION **/

/** BEGIN SUB-NAVIGATION **/

#main-menu ul li ul.subnav
{
	display: none;
	position: absolute;
	width: 830px;
    height: 21px;
	padding: 7px 0px 0px 4px;
	background-color: transparent;
    z-index: 999;
	top: 26px;
}

#main-menu ul li ul.subnav li {
    padding: 5px 0px;
}

#main-menu ul li ul.subnav li a:link,
#main-menu ul li ul.subnav li a:visited,
#main-menu ul li ul.subnav li a:hover,
#main-menu ul li ul.subnav li a:active {
    text-decoration: none;
    margin: 0;
    padding: 6px 13px 6px 13px;
    color: #fff;
    font-size: 12px;
}

#main-menu * a:hover,
#main-menu * a:active {
    color: #fff;
}

Javascript:

var currentPrimary = 'navHome';
var currentSecondary = '';
var currentSecondaryElement = '';

/**
 * Opens a submenu on the navigation bar
 * 
 * @param 	primary New primary navigation focused parent
 * @param 	secondary Secondary navigation to open
 * @return 	void
 */
function openSubmenu(primary, secondary) {
	if (currentSecondary != '') {
		document.getElementById(currentSecondary).style.display='none';
	}
	var oldPrimary = document.getElementById(currentPrimary);
	if (oldPrimary != null) {
		oldPrimary.className = oldPrimary.className.replace(/Active/g,'');
	}
	currentPrimary = primary;
	currentSecondary = secondary;
	var newPrimary = document.getElementById(currentPrimary);
	newPrimary.className = newPrimary.className + " Active";
	document.getElementById(currentSecondary).style.display='inline-block';
}

/**
 * Highlights and sticks the highlighted secondary element
 * 
 * @param	secElem The secondary element being highlighted
 * @return	void
 */
function highlightSecondaryElement(secElem) {
	if (currentSecondaryElement != '') {
		var oldSecElem = document.getElementById(currentSecondaryElement);
		oldSecElem.className = oldSecElem.className.replace(/Active/g,'');
	}
	var newSecElem = document.getElementById(secElem);
	newSecElem.className = newSecElem.className + " Active";
	currentSecondaryElement = secElem;
}

/**
 * Method provided to body onload process to select the navigation sections the user is currently on
 * 
 * @param 	primary New primary navigation focused parent
 * @param 	secondary Secondary navigation to open
 * @param 	secondaryElem Secondary element to highlight
 * @return	void
 */
function selectNavElements(primary, secondary, secondaryElem) {
	currentPrimary = primary;
	currentSecondary = secondary;
	currentSecondaryElement = secondaryElem;
	var newPrimary = document.getElementById(currentPrimary);
	newPrimary.className = newPrimary.className + " Active";
	var newSecElem = document.getElementById(secondaryElem);
	newSecElem.className = newSecElem.className + " Active";
	document.getElementById(currentSecondary).style.display='inline-block';
}

[CoderDan]

I put your code all together into a test file, and i get a single level menu accross the top of the page. no sub menus and a lot of repeated id errors. (using firefox) clicking on the items does nothing. can you get a working html file, and post that?
this, as an example, is what I got from your pasted code segments:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Menu Code</title>
		<style type='text/css'>
		/* Main Menu */
		#menu-container {
		    width: 860px;
		    float: left;
		    margin: 26px 0 0 0;
		}

	#menu-container .ammark {
	    text-align: right;
	    padding: 0 10px 3px;
	}

	#main-menu {
	    width: 838px;
	    height: 52px;
	    background: transparent url('../images/menu-bg.png') top center no-repeat;
	    float:right;
	    position: relative;
	}

	#main-menu {
		margin: 0;
	    margin-top: 0px;
	    padding-top: 14px;
		text-transform: lowercase;
		font-size: 1em;
		color: 000;
	}

	#main-menu ul li a:link,
	#main-menu ul li a:visited,
	#main-menu ul li a:hover,
	#main-menu ul li a:active {
		text-decoration: none;
		margin:	0;
		padding: 10px 15px 10px 15px;
	}

	#main-menu ul {
	    position: relative;
	    display: inline;
	    border: none;
	    list-style: none;
	    height: 50&#37;;
	    width: 100%;
	    padding-left: 4px;
	    line-height: 1;
	}

	#main-menu ul li {
	    margin: 0;
	    padding: 13px 0px 14px 0px;
	    border: none;
	    display: inline;
	}

	#main-menu ul li:hover,
	#main-menu ul li.Active {
		background-color: #728DA2;
	}

	/** END MAIN NAVIGATION **/

	/** BEGIN SUB-NAVIGATION **/

	#main-menu ul li ul.subnav
	{
		display: none;
		position: absolute;
		width: 830px;
	    height: 21px;
		padding: 7px 0px 0px 4px;
		background-color: transparent;
	    z-index: 999;
		top: 26px;
	}

	#main-menu ul li ul.subnav li {
	    padding: 5px 0px;
	}

	#main-menu ul li ul.subnav li a:link,
	#main-menu ul li ul.subnav li a:visited,
	#main-menu ul li ul.subnav li a:hover,
	#main-menu ul li ul.subnav li a:active {
	    text-decoration: none;
	    margin: 0;
	    padding: 6px 13px 6px 13px;
	    color: #fff;
	    font-size: 12px;
	}

	#main-menu * a:hover,
	#main-menu * a:active {
	    color: #fff;
	}
	</style>
	<script type='text/javascript'>
	var currentPrimary = 'navHome';
	var currentSecondary = '';
	var currentSecondaryElement = '';

	/**
	 * Opens a submenu on the navigation bar
	 * 
	 * @param 	primary New primary navigation focused parent
	 * @param 	secondary Secondary navigation to open
	 * @return 	void
	 */
	function openSubmenu(primary, secondary) {
		if (currentSecondary != '') {
			document.getElementById(currentSecondary).style.display='none';
		}
		var oldPrimary = document.getElementById(currentPrimary);
		if (oldPrimary != null) {
			oldPrimary.className = oldPrimary.className.replace(/Active/g,'');
		}
		currentPrimary = primary;
		currentSecondary = secondary;
		var newPrimary = document.getElementById(currentPrimary);
		newPrimary.className = newPrimary.className + " Active";
		document.getElementById(currentSecondary).style.display='inline-block';
	}

	/**
	 * Highlights and sticks the highlighted secondary element
	 * 
	 * @param	secElem The secondary element being highlighted
	 * @return	void
	 */
	function highlightSecondaryElement(secElem) {
		if (currentSecondaryElement != '') {
			var oldSecElem = document.getElementById(currentSecondaryElement);
			oldSecElem.className = oldSecElem.className.replace(/Active/g,'');
		}
		var newSecElem = document.getElementById(secElem);
		newSecElem.className = newSecElem.className + " Active";
		currentSecondaryElement = secElem;
	}

	/**
	 * Method provided to body onload process to select the navigation sections the user is currently on
	 * 
	 * @param 	primary New primary navigation focused parent
	 * @param 	secondary Secondary navigation to open
	 * @param 	secondaryElem Secondary element to highlight
	 * @return	void
	 */
	function selectNavElements(primary, secondary, secondaryElem) {
		currentPrimary = primary;
		currentSecondary = secondary;
		currentSecondaryElement = secondaryElem;
		var newPrimary = document.getElementById(currentPrimary);
		newPrimary.className = newPrimary.className + " Active";
		var newSecElem = document.getElementById(secondaryElem);
		newSecElem.className = newSecElem.className + " Active";
		document.getElementById(currentSecondary).style.display='inline-block';
	}
	</script>
</head>
<body>
	<div id="main-menu">
		<ul>
			<li onmouseover="openSubmenu('navAbout', 'subAbout');" id="navAbout">
				<a href="#" title="About">About ITS</a>
				<ul class="subnav" id="subAbout">
					<li id="subAbout-computersupport"><a href="#" title="About Computer Support">Computer Support</a></li>
					<li id="subAbout-media"><a href="#" title="About Media Services">Media Services</a></li>
					<li id="subAbout-printing"><a href="#" title="About Printing">Printing &amp; Plotting</a></li>
					<li id="subAbout-webteam"><a href="#" title="About Web Team">Web Team</a></li>
					<li id="subAbout-contact"><a href="#" title="Contact Information">Contact Us</a></li>
				</ul>
			</li>

			<li onmouseover="openSubmenu('navNews', 'subNews');" id="navNews">
				<a href="#">News &amp; Events</a>
				<ul class="subnav" id="subNews">
				</ul>
			</li>

			<li onmouseover="openSubmenu('navPolicies', 'subPolicies');" id="navPolicies">
				<a href="#" title="Policies">Policies &amp; Procedures</a>
				<ul class="subnav" id="subPolicies">
					<li id="subSupport-computersupport"><a href="#" title="Policies - Computer">Computer</a></li>
					<li id="subSupport-media"><a href="#" title="Media Policies">Media</a></li>
					<li id="subSupport-web"><a href="#" title="Web Policies">Web</a></li>
				</ul>
			</li>

			<li onmouseover="openSubmenu('navServices', 'subServices');" id="navServices">
				<a href="#" title="Services">Services</a>
				<ul class="subnav" id="subServices">
					<li id="subAbout-computersupport"><a href="#" title="Computer Support Services">Computer Support</a></li>
					<li id="subAbout-consulting"><a href="#" title="Consulting &amp; Professional Services">Consulting &amp; Professional Services</a></li>
					<li id="subAbout-media"><a href="#" title="Media Services">Media Services</a></li>
					<li id="subAbout-printing"><a href="#" title="About Printing">Printing &amp; Plotting</a></li>
					<li id="subAbout-webteam"><a href="#" title="Web Team Services">Web Team Services</a></li>
				</ul>
			</li>

			<li onmouseover="openSubmenu('navSupport', 'subSupport');" id="navSupport">
				<a href="#" title="Technical Support">Technical Support</a>
				<ul class="subnav" id="subSupport">
					<li id="subSupport-computersupport"><a href="#" title="Computer Support">Computer Support</a></li>
					<li id="subSupport-documentation"><a href="#" title="Documentation">Documentation</a></li>
					<li id="subSupport-downloads"><a href="#" title="Downloads">Downloads</a></li>
					<li id="subSupport-web"><a href="#" title="Web Support">Web Support</a></li>
				</ul>
			</li>
  		</ul>
	</div>
</body>
</html>

[caenicus]

Thanks for your help, Dan! I have created a sample page at http://www.tomking.net/its_test/ to give you an idea of what is going on. Hope this helps!

[CoderDan]

looking at your sample page it looks like float vs padded items or similar.

I'd try specifying the padding and margin specifically for all menu elements, and for teh containing structures, try to use 0 for padding and margin where possible, and pad with a sub-element.

I'd look closer, but out of time atm.

[caenicus]

Oh god, it was just a matter of defining 'left' for the subnav tags... I hate CSS sometimes. Thanks for your help!