Page scroll bar upsets sub-menu position

[epounce]

1) Script Title: All Levels Navigational Menu (v2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

3) Describe problem:
Using side menus:
The sub-menu block is not against the main menu block when the full sub-menu list (many items) causes the page scroll bar to appear. So moving the cursor to it is "difficult"!

Test page: [ICODE]http://test.b-b-a.co.uk/user/menu-test.php[ICODE]

The "Fashion & Lifestyle" entry has the longest list but other show the effect depending on the browser page height. (adjust the page height so that the scroll bar is not showing.)

I suspect it is to do with:-
"The CSS class "ddsubmenustyle" added to the drop down menu above styles it so it's absolutely positioned and hidden initially on the page."

Unfortunately the page then adjusts itself (sideways - centering) to allow for the scroll bar to appear.

The test page is cut down to show the problem - some of the css has been incuded in-line.
The [ICODE]<div id="wrap-main"> has an: margin:0 auto;[ICODE]
But the problem (via causing the page scroll bar to appear) only occurs once the [ICODE]<div id="header">[ICODE] is included.

I am way over my head in this. Is there some thing that can fix this or is it a bug (timing issue?)
My thought was to force a very long page so that the scroll bar is always there!

Regards
Eddie

[ddadmin]

Hmm try moving the markup for the drop down menus plus the JavaScript initialization code so they are outside of the container DIVs, such as at the very bottom of the page:




</div>
</div>
<div id="ddsidemenubar" class="markermenu">
<p style="margin:0;">Special Offers:</p>
<ul>
<li><a href="" rel="sub-menu-187">Arts & Crafts</a></li><li><a href="" rel="sub-menu-253">Education</a></li><li><a href="" rel="sub-menu-1">Electrical & I.T.</a></li><li><a href="" rel="sub-menu-76">Fashion & Lifestyle</a></li><li><a href="" rel="sub-menu-40">Health & Beauty</a></li><li><a href="" rel="sub-menu-30">Holidays & Travel</a></li><li><a href="" rel="sub-menu-25">Home & Garden</a></li><li><a href="" rel="sub-menu-245">House & Home</a></li><li><a href="" rel="sub-menu-75">Magazines & Books</a></li><li><a href="" rel="sub-menu-35">Motoring Services</a></li><li><a href="" rel="sub-menu-9">Music & Films</a></li><li><a href="" rel="sub-menu-26">Out & About</a></li><li><a href="" rel="sub-menu-230">Shopping</a></li><li><a href="" rel="sub-menu-47">Shows & Events</a></li><li><a href="" rel="sub-menu-6">Special Events</a></li><li><a href="" rel="sub-menu-52">Sport & Leisure</a></li><li><a href="" rel="sub-menu-58">Toys & Games</a></li><li><a href="" rel="sub-menu-61">Utility Services</a></li><li><a href="" rel="sub-menu-299">VIP Clubs </a></li> </ul>

</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
</body>

[epounce]

Hi, Thanks.

The drop downs were already at the bottom.
Tried moving the java execution out but no joy.

Your example appears to show the top level menu at the bottom - this takes it out of the page structure unfortunately so while my problem does not occur it does not help for this case.

Looking at it again - the position of the dropdown is correct at calculation time but after it is displayed the page scroll bar is added and the centre-ing moves the rest of the page to leave the gap.
My guess is that at calculation time you have no idea if there is already a scroll bar or whether one will get added later - it would seem an intractable (if that is the correct word) problem.

Nasty fix is to add a set of para + nbsp at the end to force a scroll bar to be there at calculation time. Will look to see if there is a way of forcing a scoll bar on in css.

Would it be possible to move the calculated position to the left by half a scoll bar in every case? This would cause the drop-down to overlap the main menu lots of the time but may not be a problem as it would be over the arrows. Perhaps you could point me at the calculation so I could try this although it will spoil the overall effect.

Thanks
Eddie

[epounce]

Workaround:

<body style="overflow-y:scroll">

This causes a vertical scroll bar to always be present (and hence prevent my problem from occurring).
If scrolling is required the moveable "block" is present in the scroll bar.
If not the scroll bar is empty.