[flowersgone]

Originally Posted by LD

I ... put a margin at the bottom of the div using a css rule for the class "menunav" which looks ok in IE, but not FF.

It now looks better on my systems on IE7, IE8, FF, and Safari but there is still a small overflow by the menu at the bottom on all of them. I think I have come up with a reasonably simple and reliable solution to the problem.

First replace:

<div class="menunav">

with

<div class="menunav" id="menunav_id">

and then a bit further down the page replace

<script type="text/javascript"> 
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

with

<script type=text/javascript>
<!--
if (! menunav_retry) { // test for safari happiness
	document.getElementById('menunav_id').style.height =
		(document.getElementById('menunav1').clientHeight +5) + 'px';
	menunav_retry = 1;
}
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

This seemed to work nicely for me on all browsers mentioned above except IE7 which I didn't have a chance to test.

If this works for you, you can also remove the height specification from the .menunav css rule.

HTH,
fg