Link to home
Start Free TrialLog in
Avatar of mbeatty20
mbeatty20Flag for United States of America

asked on

Menu will work in IE, but not in Firefox

I've been working on a website and I'm having a problem with my menu.  It works perfectly in IE7 and IE8, but it will not work in Firefox.  The mouseover image works fine in Firefox, but the dropdown feature under the Services Item will not drop down.  You can find the site at www.stoutsproauto.com.   Could someone help?  Thank you.
Here is the webpage.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type = "text/css" rel="stylesheet" href = "StoutsProAuto_Background.css" />
<link type = "text/css" rel="stylesheet" href = "StoutsProAuto_WhiteSpace.css" />

<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />

<link rel="icon" type="image/x-icon" href="/favicon.ico"  />
<!--#include file="GoogleVerify.asp"-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stout's Pro Auto, where you'll find all your vehicle maintenance needs!</title>

<meta name="description" content="" />
<meta name="keywords" content="" />


</head>

<body>
<div id="bordertop">
	<div id="topPhoto">
    	<a href="index.asp" title="Stout's Pro Auto Auto Service and Repair"><img src="Images/Stouts-Pro-Auto-MechanicsLeft.png" border="none" alt="Stout's Pro Auto serving the Lock Haven, Williamsport, and Jersey Shore areas with sounds auto repair" /></a><a href="index.asp" title="Stout's Pro Auto Auto Service and Repair"><img src="Images/Stouts-Pro-Auto-MechanicsRight.png" border="none" alt="Stout's Pro Auto serving the Lock Haven, Williamsport, and Jersey Shore areas with sounds auto repair" /></a>
    </div>
</div>
<div id="centerpage">
    <div id = "whitespace">
        	<!--#include file="Menu2.asp"-->
            <img src="Images/Stouts-Pro-Auto-Quality-Automotive-Service-and-Repairs.gif" alt="Stouts Pro Auto Quality Automotive Service and Repairs" />
            <div id="homeText">From small imports to large commercial vehicles, Stout's has the state of the art equipment and knowledge to perform any service.  Featuring the latest in high tech equipment, including computer diagnostic scanners for all models, we can find your vehicle's problem and fix it quickly.</div>
            <br />
            <br />
            <div align="center"><img src="Images/Stouts-Pro-Auto-HomePage1.png" alt="Stout's Pro Auto Quality Automotive Repair serving the Williamsport Lock Haven and Jesrey Shore Areas" /></div><Br />
            <img src="Images/Stouts-Pro-Auto-HomePage2.png" alt="Stout's Pro Auto Quality Automotive Repair serving the Williamsport Lock Haven and Jesrey Shore Areas" /><br />
            <br />
            <br />
            <img src="Images/Stouts-Pro-Auto-Auto-Care-Credentials-logos.gif" alt="Stout's Pro Auto's Auto Care Credentials for the Jersey Shore, Lock Haven, and Williamsport Areas" />
    </div>
    <!--#include file="StoutsProAuto-Site-Info.asp"-->
</div> 
	<!--#include file="GoogleAnalytics.asp"-->
</body>
</html>


Here is the Menu CSS


.dropmenu {
   position: absolute;
   left: -1500px;
   visibility: visible;
   z-index: 101;
   float: left;
   width: 125px;

   border-width: 0px;
   border-style: solid;
   border-color: #000000;	
   background-color: #000000;
}
.dropmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.dropmenu li {
   display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
   display: block;
   width: 123px;

   padding: 2px;
   margin: 1px;
   font-family: Monospace;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;

   color: #FFFFFF;
   background-color: #7F7F7F;
}
.dropmenu a:hover {
   padding: 2px;
   margin: 1px;
   font-family: Monospace;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;

   color: #FFFFFF;
   background-color: #2200D4;
}


Here is the Menu Script
/*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "buttons/";

/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("button1up.png","button2up.png","button3up.png","button4up.png","button5up.png");

overSources = new Array("button1over.png","button2over.png","button3over.png","button4over.png","button5over.png");

// SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THIS
subInfo = new Array();
subInfo[1] = new Array();
subInfo[2] = new Array();
subInfo[3] = new Array();
subInfo[4] = new Array();
subInfo[5] = new Array();


//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//

subInfo[2][1] = new Array("Alignment","alignment.asp","");
subInfo[2][2] = new Array("Engines","","");
subInfo[2][3] = new Array("Inspections","","");
subInfo[2][4] = new Array("Transmissions","","");





//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
var xSubOffset = 0;
var ySubOffset = 22;



//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;

// GENERATE SUB MENUS
for ( x=0; x<totalButtons; x++) {
	// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
	if ( subInfo[x+1].length < 1 ) { 
		document.write('<div id="submenu' + (x+1) + '">');
	// SET DIV FOR BUTTONS WITH SUBMENU
	} else {
		document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
		document.write('onMouseOver="overSub=true;');
		document.write('setOverImg(\'' + (x+1) + '\',\'\');"');
		document.write('onMouseOut="overSub=false;');
		document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');
		document.write('setOutImg(\'' + (x+1) + '\',\'\');">');


		document.write('<ul>');
		for ( k=0; k<subInfo[x+1].length-1; k++ ) {
			document.write('<li>');
			document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');
			document.write('target="' + subInfo[x+1][k+1][2] + '">');
			document.write( subInfo[x+1][k+1][0] + '</a>');
			document.write('</li>');
		}
		document.write('</ul>');
	}
	document.write('</div>');
}





//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
	for ( x=0; x<totalButtons; x++ ) {
		buttonUp = new Image();
		buttonUp.src = buttonFolder + upSources[x];
		buttonOver = new Image();
		buttonOver.src = buttonFolder + overSources[x];
	}
}

// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
	document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
	document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}



//*** SUB MENU FUNCTIONS ***//
// GET ELEMENT ID MULTI BROWSER
function getElement(id) {
	return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null; 
}

// GET X COORDINATE
function getRealLeft(id) { 
	var el = getElement(id);
	if (el) { 
		xPos = el.offsetLeft;
		tempEl = el.offsetParent;
		while (tempEl != null) {
			xPos += tempEl.offsetLeft;
			tempEl = tempEl.offsetParent;
		} 
		return xPos;
	} 
} 

// GET Y COORDINATE
function getRealTop(id) {
	var el = getElement(id);
	if (el) { 
		yPos = el.offsetTop;
		tempEl = el.offsetParent;
		while (tempEl != null) {
			yPos += tempEl.offsetTop;
			tempEl = tempEl.offsetParent;
		}
		return yPos;
	}
}

// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
	var el = getElement(objectID);
	el.style.left = x;
	el.style.top = y;
}

// MOVE SUBMENU TO CORRESPONDING BUTTON
function showSubMenu(subID, buttonID) {
	hideAllSubMenus();
	butX = getRealLeft(buttonID);
	butY = getRealTop(buttonID);
	moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
}

// HIDE ALL SUB MENUS
function hideAllSubMenus() {
	for ( x=0; x<totalButtons; x++) {
		moveObjectTo("submenu" + (x+1) + "",-500, -500 );
	}
}

// HIDE ONE SUB MENU
function hideSubMenu(subID) {
	if ( overSub == false ) {
		moveObjectTo(subID,-500, -500);
	}
}



//preload();

Here is the Menu

<table border="0" cellpadding="0" cellspacing="0"><tr><td>
<a href="index.asp" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target=""><img src="buttons/button1up.png" border="0" id="button1" vspace="0" hspace="0"></a><a href="*" onmouseover="setOverImg('2','');overSub=true;showSubMenu('submenu2','button2');" onmouseout="setOutImg('2','');overSub=false;setTimeout('hideSubMenu(\'submenu2\')',delay);" target=""><img src="buttons/button2up.png" border="0" id="button2" vspace="0" hspace="0"></a><a href="*" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3');" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu(\'submenu3\')',delay);" target=""><img src="buttons/button3up.png" border="0" id="button3" vspace="0" hspace="0"></a><a href="*" onmouseover="setOverImg('4','');overSub=true;showSubMenu('submenu4','button4');" onmouseout="setOutImg('4','');overSub=false;setTimeout('hideSubMenu(\'submenu4\')',delay);" target=""><img src="buttons/button4up.png" border="0" id="button4" vspace="0" hspace="0"></a><a href="*" onmouseover="setOverImg('5','');overSub=true;showSubMenu('submenu5','button5');" onmouseout="setOutImg('5','');overSub=false;setTimeout('hideSubMenu(\'submenu5\')',delay);" target=""><img src="buttons/button5up.png" border="0" id="button5" vspace="0" hspace="0"></a><br>
</td></tr></table>

Open in new window

Avatar of Philip_Spark
Philip_Spark
Flag of United Kingdom of Great Britain and Northern Ireland image

You've also got a couple of typos in your menu

Technician Qualifications

also tires should be tyres

unless that's an americanism

looking at the site with safari apart from your menu issues the whole site isn't centred under your header, it  bears to the left.

see screenshot
Screen-shot-2009-12-28-at-15.01..png
Avatar of mbeatty20

ASKER

Thank you for catching my Technician Qualifications spelling error, and tires is correct for America.  In IE and Firefox it is centered.  If you can tell me a fix for Safari, I'd be glad to add it, however, I'm not that concerned about it.   The only thing is my main question still hasn't been answered.  Why my menu works fine with IE, but not Firefox.  Did it work with Safari?  There should be submenu items under Services & Repairs.  Thank you.
It didn't work in safari, I think once you get the firefox problem sorted safari will probably fall into place as it has a similar backend engine.

I'm looking into the problem, although unfortunately coding is not my forte.
Here's a very simple way to implement your submenu...  You'll need to make this work for your particular situation, but this is VERY light-weight.  All I've provided here is a sub-menu system that works.

Give this code a shot and see if it helps you out any.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title> CSS Menu / Sub Menu </title>
		<style type="text/css" media="all">
		ul{
			display: none;
		}

		.menuItem{
			float: left;
			width: 200px;
		}

		ul{ margin: 0px; padding: 0px; list-style: none; }

		.menuItem:hover{
			background: #ccf;
		}

		.menuItem:hover ul{
			display: block;
		}

		.menuItem:hover li:hover a{
			display: block;
			background: #ffc;
		}
		</style>
	</head>

	<body>
		<div class="menuItem">
			Title One
			<ul>
				<li><a href="#">Sub Item one</a></li>
				<li><a href="#">Sub Item two</a></li>
				<li><a href="#">Sub Item three</a></li>
				<li><a href="#">Sub Item four</a></li>
			</ul>
		</div>

		<div class="menuItem">
			Title Two
			<ul>
				<li><a href="#">Sub Item one</a></li>
				<li><a href="#">Sub Item two</a></li>
				<li><a href="#">Sub Item three</a></li>
				<li><a href="#">Sub Item four</a></li>
			</ul>
		</div>

		<div class="menuItem">
			Title Three
			<ul>
				<li><a href="#">Sub Item one</a></li>
				<li><a href="#">Sub Item two</a></li>
				<li><a href="#">Sub Item three</a></li>
				<li><a href="#">Sub Item four</a></li>
			</ul>
		</div>

		<div class="menuItem">
			Title Four
			<ul>
				<li><a href="#">Sub Item one</a></li>
				<li><a href="#">Sub Item two</a></li>
				<li><a href="#">Sub Item three</a></li>
				<li><a href="#">Sub Item four</a></li>
			</ul>
		</div>
	</body>
</html>

Open in new window

By the way,
A bonus to using the above method is the increased likelihood that it will work in all browsers...  With the internet being a dumping ground for various scripts, many people turn off Javascript in their browsers.  If this is the case, then they'll never get to some parts of your site.

Using this CSS method, even if someone has CSS scripts disabled or if they use their own custom script, any user will still be able to get to all parts of your site.

I also just realized that I included the ul{} style twice.  Ooops!  I'm sure you'll be able to correct it as you see fit. ;)
ASKER CERTIFIED SOLUTION
Avatar of mbeatty20
mbeatty20
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial