HV menu IE bug causing sublevel trouble in 800 x 600

[laschen]

HV Menu

http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm

I'm having a bit of trouble getting my horizontal menu to function properly in IE with a screen resolution of 800 x 600. The menu works fine when the screen resolution is 1024 and above.

When in 800 x 600, the second level menus show up at the x,0 and y,0 position and the third level menus overlap them.

My page is designed for 800 x 600 and my CSS divs are at 100% or auto. I've tried to shorten the length of the menu to 750px. but it still has issues in the 800 screen resolution.

I'm using CSS and was wondering if there was a float, block or layering issue. Again this issue is only with a screen resolution of 800 x 600 using IE - Safari and FF is a okay.

I appreciate your help. My website is http://www.district87.org

[laschen]

I'm still experiencing trouble...any help is appreciated.

I've narrowed this down to a css vs. javascript vs. IE issue.

I set the HV script within a table and set the z-index to 1000 and width to 100%, but the submenus still appear in the left top corner instead of directly below the menu. This only appears when the screen resolution is at 800x600 in IE only. website: http://www.district87.org

The menus appear fine in Safari when the screen resolution is 800x600.
Also, it's okay when in IE (800x600) when CSS is NOT applied. see example: http://www.district87.org/boardmembers.html, so there is a conflict with javascript, css and IE.

thanks

[jscheuer1]

Have you read and experimented with this bit:


TargetLoc
Text string- Enables relative positioning of the menu.
1- In the HTML-file where the menu shows you need a named div:
<div id='MenuPos' style='position:relative'></div>
2- Set TargetLoc to 'MenuPos'
3 - Set MenuCentered to 'left', MenuVerticalCentered to 'top' and StartTop and StartLeft to 0
4 - StartTop, StartLeft and the Menu center variables can still be used to get an offset from the <div>.

Remarks: the different ways browsers interpret the pageX and pageY offset makes this feature difficult. I got the best results by putting the div inside a table, give the div the same dimensions as the first level menu, put an transparent image inside the div with again the same dimensions as the first level menu
<table>
<tr><td>
<div id='MenuPos' style='position:relative; width:102; height:102;'><img src='transparent.gif' width='102' height='102'></div>
</td></tr>
</table>

[laschen]

Yeah, I tried that before I posted. Just tried your suggestions again and it still doesn't work. I applied it to this page, as to not mess up the homepage:

http://www.district87.org/default2.htm

Thanks for your help, but it looks like I will need to spend some time finding a new menu. That's too bad because I really like this one, but around 30% of my visitors are still using 800x600 resolution.