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';
}

[caenicus]

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!

[C55inator]

http://www.tomking.net/its_test/ is a blank blue background.