Menu Inside Table (1st level Submenus Offset in Safari)

[tomcraig]

Well, I feel like I've tried everything I could before posting. I'm using the latest version of the menu: 5.769 at http://208.112.63.188

The menu displays as it should on IE PC and Firefox. However, on Mac Safari 2.04, the first level submenus are shifted right about 20-30 pixels. Any ideas? When I remove it from the table, the submenus appear aligned correctly, but I need the menu in a table.

EDIT: When I use position=absolute the submenus align in Safari, but when position=relative (necessary since the menu is in a table), the submenus are off.

The menu is in a table as such:

Code: Select all

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" STYLE="width:766; position:absolute; top:94px;">
<TR>
	<TD WIDTH="766" ALIGN="CENTER">
<SCRIPT type="text/javascript">
with(milonic=new menuname("Main Menu")){
alwaysvisible="1";
align="center";
margin="0";
menuheight="60";
menuwidth="645";
menualign="left";
itemwidth="645";
left="0";
top="0";
position="relative";
orientation="horizontal";
style=mainmenuStyle;
screenposition="left";
buildAfterLoad="true";
aI("showmenu=menu200;text=About Us;url=content.cfm?id=200;");
aI("showmenu=menu236;text=Get Connected;url=javascript:void(null);");
aI("showmenu=menu245;text=Coming Up!;url=javascript:void(null);");
aI("showmenu=menu238;text=EXTRA!;url=javascript:void(null);");
aI("text=Contact Us;url=content.cfm?id=150;");
aI("text=HOME;url=content.cfm?id=135;");
}
drawMenus();
</SCRIPT>
	</TD>
</TR>
</TABLE>

The menu settings are:

Code: Select all

fixMozillaZIndex=false; //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(mainmenuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=0;
fontfamily="arial, tahoma";
fontsize="100%";
fontstyle="normal";
headerbgcolor="#ffffff";
headerborder=1;
headercolor="#ffffff";
offbgcolor="transparent";
offcolor="#333333";
onbgcolor="#103E7B";
oncolor="#ffffff";
padding=5;
pagebgcolor="#646B08";
pagecolor="#ffffff";
pageimage="";
separatoralign="left";
separatorcolor="#DEE5EC";
separatorsize=1;
subimage="menu2/arrow.gif";
subimagepadding=5;
subimageposition="right";
outfilter="Fade(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);";
}

with(submenuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=0;
fontfamily="arial, tahoma";
fontsize="100%";
fontstyle="normal";
headerbgcolor="#ffffff";
headerborder=1;
headercolor="#ffffff";
offbgcolor="#2B65B1";
offcolor="#ffffff";
onbgcolor="#103E7B";
oncolor="#ffffff";
padding=10;
pagebgcolor="#646B08";
pagecolor="#ffffff";
pageimage="";
separatoralign="left";
separatorcolor="#1D4E90";
separatorsize=1;
subimage="menu2/arrow.gif";
subimagepadding=10;
subimageposition="right";
outfilter="Fade(duration=0.1)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);";
}

Any help is greatly appreciated. Thanks.

[tomcraig]

My battle pitted me against putting the menu in a table with position=relative that caused the strange offset of the 1st level submenus in Safari versus putting the menu in divs with position=absolute that gives correct submenu offset but causes a horizontal scrollbar in the browser in Safari.

So, I went back to divs and just changed my div width from 100% to 90%, and that took care of the horizontal scrollbar in Safari. It's positioned perfectly now in the major browsers, not that I consider Safari a major browser, but I hear from those users the most.

Thank you for viewing these posts.

[Ruth]

Hi,

I don't have Safari, but just as a guess, I think it is probably having a problem because of the screenposition='left'; given the menu is relatively positioned in a table.

Ruth