Adding a menu using php call which uses js

[flowersgone]

Hi,

I noticed that you are nowing using the new menus throughout the site and not just on the test page: http://www.lusciousdelights.com/linklist/amateurt.php. When I look at the pages the menu appears to go down past its bounding box and there is sometimes no space between the menu and the ad below.

I was able to hack a test fix into a downloaded copy of one of your pages that might give you some insight into the problem and lead you towards a fix. I changed

<div class="menunav">

to read

<div class="menunav" style="padding-bottom: 5em">

and after reloading the bounding box looked better. You might try this on the test page mentioned above. While inline styles are often not regarded as good coding, if you find that the hack works I could easily provide you with some more stylistically appropriate coding.

Best of luck,
fg

[LD]

Originally Posted by flowersgone

You might try this on the test page mentioned above. While inline styles are often not regarded as good coding, if you find that the hack works I could easily provide you with some more stylistically appropriate coding.

Best of luck,
fg

Thanks for your help. What I did was 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. Ugh...I might try your suggestion and see what happens.

[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

[flowersgone]

Actually - just noticed, for this to work you actually need to change

height: 755px;

to

height: auto;

in the .menunav css rule of dl_stylelusciousr.css or remove that specification completely.