Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:40

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