newbie having submenu offset problem with IE in centered div

[barbara_x]

Hi,

EDITED: I added the code as recommended in another post : buildAfterLoad=true

and submenus now are positioned correctly.

I'm trying out the menus for the first time.

Of course I'm having an offset problem with IE.

The submenu is offset to the right when it is placed in a centered div. This becomes obvious when the window is open to 1280 \px wide in IE.

The div it's in is inside another centered div (margin: 0 auto;). And the style for the containing div is positioned relative:

Code: Select all

#blog-header {
	position:relative;
	margin: 0;
	...
  }

Problem can be viewed at:
http://www.bobata.com/clients/WPCT/prot ... _temp.html

Now I'm just wondering what the best method is to keep this submenu from floating off to the right. I saw a few different solutions here but I'm wondering if there's some obvious way I should try first.

the menu_data.js code looks like this:

Code: Select all

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


with(menuStyle=new mm_style()){
bordercolor="#ccc";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial Narrow, Tahoma, Verdana";
fontweight="bold";
fontstyle="normal";
fontsize="100%";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#f9f9ff";
offcolor="#a03";
onbgcolor="#ddddff";
oncolor="#600";
outfilter="randomdissolve(duration=0.0)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#CCC";
separatorsize=1;

//subimage="arrow.gif";
//subimagepadding=2;
}

with(menuStyle1=new mm_style()){
bordercolor="#ccc";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial, Tahoma, Verdana";
fontweight="normal";
fontstyle="normal";
fontsize="90%";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#f9f9ff";
offcolor="#666";
onbgcolor="#ddddff";
oncolor="#600";
outfilter="randomdissolve(duration=0.0)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#CCC";
separatorsize=1;

//subimage="arrow.gif";
//subimagepadding=2;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=400;
orientation="horizontal";
style=menuStyle;
top=177;
//aI("text= Home ;url=http://milonic.com/;");
aI("showmenu=WhoWeAre;text= WHO WE ARE ;");
aI("showmenu=Sundays;text= SUNDAYS ;");
aI("showmenu=Adults;text= ADULTS ;");
aI("showmenu=YouthAndChildren;text= YOUTH AND CHILDREN ;");
aI("text=Calendar;text= CALENDAR ;");
aI("text=Newsletter;text= NEWSLETTER ;");

}

with(milonic=new menuname("WhoWeAre")){
overflow="scroll";
style=menuStyle1;
aI("text=Staff;url=http://www.WPCtiburon.org/WhoWeAre.htm#Staff;")
aI("text=History;url=http://www.WPCtiburon.org/WhoWeAre.htm#History;")
}
...

Thanks for any ideas you might have about the simplest approach to fixing this.

[Ruth]

Hi,

You don't have the menu actually placed in the div. You have the calls for it there, but you have it absolutely positioned at top=177;left=400.

I'm unable to play with it, since I keep getting some object error, which I believe has to do with that mmLoadMenus thingee.

Is that a function? where is it? Is it somehow trying to override the top=left= of the menu itself?

I just keep gettting an object expected error and I don't know if that's affecting anything.

Where exactly do you want the menu? If you want it in the div you need to place it there using the directions for placing it in a table, though we tell everyone, it is not recommended that the menu be placed in a div.

If that div is actually centered, you can just place the menu absolutely using the screenposition="center"; and then set a top offset. That way it will always be centered no matter the resolution, and using the top offset should keep it always in the same place from the top no matter the resolution .

table based - relative positioned http://milonic.com/tablemenu.php

If you can fix whatever it is, or tell me where to get it so I dont' get that object error all the time, since I can't tell if that is causing problems for me, and tell me where you want the menu, I will try to play with it

Ruth

[barbara_x]

Well, I cleaned up the extraneous script references (I already tried out Dreamweaver and Brainjar menun javascript, so those script links were left over).

I see what you're saying about the absolute positioning on a centered page. However, it looks like as long as I have "buildAfterLoad=true" at the top of the menu_data.js file, then everything falls correctly! -- well, it appears to be working correctly on XP IE and XP FF. Will have to check it out on Safari Mac.

Could this be why it appears to be working:
In CSS, a div assigned position:absolute, is positioned absolutely in reference to the next containing block which has position assigned. If all are unassigned, then position: absolute refers to outermost container. In this case, since its containing block is position:relative, then position:absolute refers to that block.

But it only worked this way once I inserted "buildAfterLoad=true".

[Ruth]

Hi,

Did you update that test page so I can check it? It looks the same to me.

buildAfterLoad is a property which allows putting the menu in a div or table without having to use the split file method. That means if you are placing the menu in the div using the calls and position relative, you must have that property set to true.

If you want the menu available right away you can't use the buildAfterLoad and you must use the original method of placing the menu in a div.

Again, I can work with it, if you'll give me the info on where you want the menu and a test page without the extraneous things from the other menus.

Ruth