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:43
Menu Inside Table (1st level Submenus Offset in Safari)
Poster: tomcraig
Dated: Wednesday January 24 2007 - 22:15:18 GMT
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:
<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>
<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:
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);";
}
_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.
Inelegantly Fixed
Poster: tomcraig
Dated: Thursday January 25 2007 - 14:55:09 GMT
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.