Menu moves down in column on window resize [SOLVED]

Poster: pgreen
Dated: Saturday March 3 2007 - 15:54:15 GMT

The menu stays at the top of the column at screen resolutions of 1152 x 864 and 1024 x 768. However, if I resize the window to 800 x 600, the entire menu moves down 1-2 inches in the column.
This happens in both IE 7 and FireFox. You can see the effect at
http://www.hcso.info/new.

I tried changing the "fixMozillaZIndex=true" parameter to false, but this did not help.

Here is the HTML for the embedded menu. As you can see, I have set the column to valign="top". (The div is used to put a line at the bottom of the menu, as I set the border to 0 for the main menu.)

<td width="15%" valign="top" class="menu_bar"><div class="menu_div"> <SCRIPT language="JavaScript" src="scripts/embedded_main_menu.js" type="text/javascript"></SCRIPT> </div></td>


I have also set the vertical align property in my css for both the menu bar and menu div as follows:

.menu_bar {

background-color: #aaccdd;
vertical-align:top;

}

.menu_div {

border-bottom: 1px solid #000000;
vertical-align:top;

}

Here is my main menu code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
overflow="scroll";
style=menuStyle;
position="relative";
itemwidth="100%";
aI("text=Home;url=http://www.hcso.info/new/;");
.......

And here is my menu_data code:

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=0;
_subOffsetTop=4;
_subOffsetLeft=-2;


with(menuStyle=new mm_style()){
bordercolor="#000000";
borderstyle="solid";
borderwidth=0;
fontfamily="Tahoma, Arial, Helvetica, sans-serif";
fontsize="90%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#aaccdd";
offcolor="#000000";
onbgcolor="#ffffff";
oncolor="#000000";
outfilter="";
overfilter="";
padding=5;
pagebgcolor="#aaccdd";
pagecolor="black";
separatorcolor="#000000";
separatorsize=1;
subimage="images/arrow.gif";
subimagepadding=2;
}

Any help would be appreciated.

Cheers,
Paul

Poster: Ruth
Dated: Saturday March 3 2007 - 17:34:44 GMT

Hi,

It's because you're using percentages in the table, so when you resize the page it tries to make that table cell = 15% which it can't do because the menu is in it, but when it tries to do it, it shifts the menu down. I'm trying to see if I can figure a way around it. If I find one, I'll post back.

Ruth

Poster: pgreen
Dated: Saturday March 3 2007 - 19:55:08 GMT

Ruth,

Thanks for your prompt reply. It explains why I did not have this problem in another site in which I used your menu, as there I used divs with fixed widths, for example, 120px. I have since gotten away from this practice and would prefer to use percentages, so I hope you can come up with a solution.

Cheers,
Paul

Poster: Ruth
Dated: Sunday March 4 2007 - 0:09:29 GMT

Hi,

Well, I did get a solution, and it's real easy since although I do believe the percentage has something to do with it, it is the use of the overflow='scroll' in the main menu. So, keep your percentages and remove the overflow='scroll'; from the main menu and it stays at the top.

Ruth

Poster: pgreen
Dated: Sunday March 4 2007 - 18:46:33 GMT

That works! Thanks for your help.

Cheers,
Paul