I have a site that I've got working flawlessly in IE, and I've been working at making it work in firefox. I have the positioning and size issues resolved, but I'm still unable to get the rolldown nav scripts to work properly.

The site is at http://www.ntsbdc.org

Try it first in IE, mouse over the "About Us" button, select one of the links from the dropdown, and you'll see the menus working as they should. Open it w/firefox, and when you try to mouse over the items in the roll-down, it rolls back up as you're trying to select a link.

Here's the HTML involved:

The Menu Bar (I'm using the JS write method to hide the "onLoad" parameters from the W3C validation service)

<TABLE ID="menuBar" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0">
	<TR>
		<TD><A HREF="http://www.ntsbdc.org/default.asp"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnHome\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnHomeWhite.src;}\" onMouseOver=\"this.src=btnHomeBlue.src;\" onMouseOut=\"this.src=btnHomeWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="#"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnAbout\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnAboutWhite.src;}\" onMouseOver=\"this.src=btnAboutBlue.src; rollDown('mnuAbout',13);\" onMouseOut=\"rollUp('mnuAbout'); this.src=btnAboutWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="#"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnServices\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnServicesWhite.src;}\" onMouseOver=\"this.src=btnServicesBlue.src; rollDown('mnuServices',13);\" onMouseOut=\"rollUp('mnuServices'); this.src=btnServicesWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="#"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnLocal\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnLocalWhite.src;}\" onMouseOver=\"this.src=btnLocalBlue.src; rollDown('mnuLocal',13);\" onMouseOut=\"rollUp('mnuLocal'); this.src=btnLocalWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="calendar/calendar.asp" TARGET="_blank"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnCalendar\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnCalendarWhite.src;}\" onMouseOver=\"this.src=btnCalendarBlue.src;\" onMouseOut=\"this.src=btnCalendarWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="success_stories.html" TARGET="_blank"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnSuccess\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnSuccessWhite.src;}\" onMouseOver=\"this.src=btnSuccessBlue.src;\" onMouseOut=\"this.src=btnSuccessWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="#"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnNews\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnNewsWhite.src;}\" onMouseOver=\"this.src=btnNewsBlue.src; rollDown('mnuNews',13);\" onMouseOut=\"rollUp('mnuNews'); this.src=btnNewsWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="resources.shtml" TARGET="_blank"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnResources\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnResourcesWhite.src;}\" onMouseOver=\"this.src=btnResourcesBlue.src;\" onMouseOut=\"this.src=btnResourcesWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="faq.shtml"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnFaq\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnFaqsWhite.src;}\" onMouseOver=\"this.src=btnFaqsBlue.src;\" onMouseOut=\"this.src=btnFaqsWhite.src;\" />");</SCRIPT></A></TD>
		<TD><A HREF="contact.shtml"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnContact\" src=\"images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnContactWhite.src;}\" onMouseOver=\"this.src=btnContactBlue.src;\" onMouseOut=\"this.src=btnContactWhite.src;\" />");</SCRIPT></A></TD>
	</TR>
</TABLE>

The Rolldown Menus

<UL ID="mnuAbout" class="menu" onMouseOver="stayDown('mnuAbout');" onMouseOut="rollUp('mnuAbout');" style="top:0px;">		
	<LI><A HREF="what_is.shtml">What Is NTSBDC</A></LI>
	<LI><A HREF="econ_impct.shtml">Economic Impact</A></LI>
	<LI><A HREF="adv_brd.shtml">Advisory Board</A></LI>
	<LI><A HREF="partners.shtml">Partners</A></LI>
</UL>

<UL ID="mnuServices" class="menu" onMouseOver="stayDown('mnuServices');" onMouseOut="rollUp('mnuServices');" style="top:0px;">		
	<LI><A HREF="training.shtml">Training</A></LI> 
	<LI><A HREF="counseling.shtml">Counseling</A></LI> 
	<LI><A HREF="risk_mgmt.shtml">Risk Management</A></LI> 
	<LI><A HREF="gov_contr.shtml">Government Contracting</A></LI> 
	<LI><A HREF="internl_trade.shtml">International SBDC</A></LI> 
	<LI><A HREF="enterprise.shtml">Enterprise Excellence</A></LI> 
	<LI><A HREF="tech_asst.shtml">Technology Assistance</A></LI> 
</UL>

<UL ID="mnuLocal" class="menu" onMouseOver="stayDown('mnuLocal');" onMouseOut="rollUp('mnuLocal');" style="top:0px;">		
	<LI><A HREF="map.shtml">SBDC Location Map</A></LI>
	<LI><A HREF="county_list.shtml">Search by County</A></LI>
	<LI><A HREF="sbdc_list.shtml">SBDC Offices</A></LI>
</UL>

<UL ID="mnuNews" class="menu" onMouseOver="stayDown('mnuNews');" onMouseOut="rollUp('mnuNews');" style="top:0px;">		
	<LI><A HREF="docs/NTSBDCannualReportBooklet.pdf" TARGET="_blank">Annual Report 2006</A></LI> 
	<LI><A HREF="docs/Annual 05.pdf" TARGET="_blank">Annual Report 2005</A></LI> 
	<LI><A HREF="docs/2004 NTSBDC Annual Report.pdf" TARGET="_blank">Annual Report 2004</A></LI> 
	<LI><A HREF="docs/2003_annual_report.pdf" TARGET="_blank">Annual Report 2003</A></LI> 
	<LI><A HREF="docs/2002 annual report.pdf" TARGET="_blank">Annual Report 2002</A></LI> 
</UL>

The Javascript

var timeouts = {};

function rollDown(list,speed)
{
	if(document.getElementById){
		menu = document.getElementById(list)
		menu.style.visibility = "visible";
		if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
			if(parseInt(menu.style.top) < 148){
				menu.style.top = parseInt(menu.style.top) + (speed) + "px";
				speed = speed * .95;
				if (speed < 1){speed = 1}
				timeouts[ list ] = setTimeout("rollDown('" + list + "'," + speed + ")", 5);
			}else
				{menu.style.top = 148;
//				alert(menu.style.top);
				clearTimeout( timeouts[ list ] );}
		}else
			{if(parseInt(menu.style.top) < 27){
				menu.style.top = parseInt(menu.style.top) + speed + "px";
				speed = speed * .9;
				if (speed < 1){speed = 1}
				timeouts[ list ] = setTimeout("rollDown('" + list + "'," + speed + ")", 10);
			}else
				{menu.style.top = 27;
				clearTimeout( timeouts[ list ] );}
			}
	}
}

function rollUp(list)
{
	if(document.getElementById){
		menu = document.getElementById(list)
		menu.style.visibility = "visible";
		if(parseInt(menu.style.top) > -30){
			menu.style.top = parseInt(menu.style.top) - 10 + "px";
			timeouts[ list ] = setTimeout("rollUp('" + list + "')", 10);
		}else
			{menu.style.visibility = "hidden";
			clearTimeout( timeouts[ list] );}
		
	}
}

function stayDown(list)
{
	clearTimeout( timeouts[ list] );
	if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
		document.getElementById(list).style.top = 148;
	}else
		{document.getElementById(list).style.top = 27;}
}

There is CSS that's not shown here, because I don't think it would have an effect on the problem.

Also, notice that the menus roll down smoothly in IE, but in firefox they are real jerky - If I remove the scrolling marque on the left side, they move smoothly in firefox. Can't firefox do 2 things at a time?

Thanks,

joe

Not sure about your code, dude, but I about crapped my pants when you resized my browser. I can guarantee you that I'd never return to a site that has the gall to f with my browser size.

If you are doing anything not quite vanilla (frames for example) you will find that DOM references have some quirks. I do E-commerce sights, the way I have decided to deal with browser incompatibility is, "If it doesn't work in a browser other than IE, so what!" IE is 97% of the market, it isn't worth the labor. P.S. check out the IE expression statement for CSS, WOW!, and it only works with IE.

Wow, your code is pretty foul. You should also consider that your menu is not there at all without JS enabled, nor are you using any sort of image replacement.

In Fx, the dropdown menu 'slips' when moving from the menu header to the dropdown and in between dropdown items. The former is either because the uls (which you have not styled sufficiently) have a different default margin & padding in the two browsers, or because IE is treating the margin as part of the object and Fx is not. The latter is probably because the retract menu code is called before being cancelled again.

If you stick the dropdowns inside the main menu items, you only need one mouseover / mouseout check (and also make the page more semantically sensible). Here's some code I adapted from Suckerfish to include sliding menu animations. I changed the styling slightly on #nav li ul and replaced the JS with my own. It seems to have problems occasionally with stuff building up in the queue, so you may wish to look into emptying that.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head><title>Suckerfish Dropdowns - One Level Bones</title>


<script type="text/javascript" src="jquery.js"></script>


<style type="text/css">

body {
	font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	display: none;
}

#content {
	clear: left;
	color: #ccc;
}

</style>

<script type="text/javascript">

//<![CDATA[
	jQuery(document).ready(function()
	{
		jQuery("#nav li").hover(function()
		{
			jQuery(this).children("ul").slideDown("fast");
		},
		function()
		{
			jQuery(this).children("ul").slideUp("fast");
		});
	});
//-->
</script>
</head>
<body>

<h1>PERCIFORMES! (1)</h1>
<p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p>

<ul id="nav">

	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>

		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>

		</ul>
	</li>

	<li><a href="#">Gobioidei</a>
		<ul>
			<li><a href="#">Burrowing gobies</a></li>
			<li><a href="#">Dartfishes</a></li>
			<li><a href="#">Eellike gobies</a></li>
			<li><a href="#">Gobies</a></li>
			<li><a href="#">Loach gobies</a></li>
			<li><a href="#">Odontobutidae</a></li>
			<li><a href="#">Sandfishes</a></li>
			<li><a href="#">Schindleriidae</a></li>
			<li><a href="#">Sleepers</a></li>
			<li><a href="#">Xenisthmidae</a></li>
		</ul>
	</li>

</ul>

<div id="content">
	<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit
blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu,
pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue
tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper
sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut
mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In
malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra,
nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
Nulla accumsan turpis at erat.</p>
	<p><a href="http://htmldog.com/articles/suckerfish/dropdowns/">Suckerfish Dropdowns</a> by <a href="http://htmldog.com/ptg/">Patrick Griffiths</a> and <a href="http://www.danwebb.net/">Dan Webb</a>.</p>
</div>

</body></html>

JeremyMiller wrote:

Not sure about your code, dude, but I about crapped my pants when you resized my browser.

It really p!sses me off when programmers jack with my browser/registry/desktop/etc. without my permission - I should be more considerate to my visitors and resist the urge to herd my audience into seeing what I see. BTW: change your pants - your co-workers can tell you've been to my site! :-)

Meloncholy wrote:

Wow, your code is pretty foul.

Ouch! (though I do appreciate your honesty)

I'm a big fan of the suckerfish menus - in fact, that's where my menu came from, though I've butchered it since the first design (obviously beyond recognition!).

Perhaps I should sharpen my JS skills. Also, spending some quality time with an XHTML book probably wouldn't hurt, either (I barely know how to spell "XHTML").

This is the first time I've visited this forum - I frequent a couple of other forums, but y'all are the only group willing to tackle this problem (yes, I'm from Texas).

Thanks, Guys (and Gals, if appropriate)! You've inspired me to re-examine my skills...

joe

I'm glad you took the comments as constructive criticism. I wish you the best success on your site.

I was feeling pretty awful when I replied to this thread (didn't realise quite how bad until an hour or so later), so should probably apologise for my lack of tact, and thank you for taking it constructively.

Essentially you seem to have made things more complicated than you need to. What you're trying to do - an animated menu - is not that unusual, and people have developed pretty standard (and pretty robust) ways of doing things like this. I replaced a good chunk of your JavaScript with just 5 lines of code (if you ignore lines with only brackets), admittedly with help from jQuery. And my code should work fine in almost any browser - the jQuery team will have made sure it does (though I'm sure many better solutions than mine are out there).

The rest of your site seems overly complicated too: you have an external stylsheet and styles at the top of your page; part of the site is table-based, part is not; you use JavaScript to write HTML, etc. If you cut it down into a cleaner, simpler format, not only would you have a nicer site, but you'd almost certainly have one that would work much more easily across many browsers without needing any hacks.

As Jeremy says, good luck with it.