Problems with Submenus on horizontal menu placed in table

[JB car pages]

Hi,

I have a problem with the positioning of the submenus on my site. I center the page (780px wide) with css (margin: 0 auto), and this leads to the submenus being centered on the site, as well. I.e., the submenu that's most to the left, is left of the center, and from then on, the submenus move over to the right in relation to the position of their parentbuttons; the offset remains the same.


I've followed all the steps for placing a horizontal menu in a relative position on a page, as described here:
http://milonic.com/tablemenu.php

I've already tried to put the menu in a separate div that was independent of the rest of the page, but once I started to center that, the problem returned. I also tried centering the div as described here: viewtopic.php?t=8612

But the problem persists.

Here is a screen shot:
http://www.jbcarpages.com/menuproblem.jpg


Thanks for your help in advance.

[JB car pages]

It seems this problem has been solved. I just downloaded a sample from this site, and tried that. It works now.

I'd deleted this part from the menu_data.js, as I didn't know it had to be listed both there and on the page: drawMenus();

[Ruth]

Good catch, JB! That is one of the most often committed errors.

Ruth

[JB car pages]

It might be helpful for future users to point this out on the instructions page.

I also encountered a problem in Firefox, where the submenus wouldn't align with the parent buttons. This was due to the fact that I had specified "position:relative" for the table/div the menu was positioned in.

[Ruth]

Hi,

How's this

http://support.milonic.com/beginners/ta ... /index.htm

As to the other which has to do with css, there are so many things that can cause a problem, and we don't know until we've encountered them that it's hard to know just what to post. For example, trying to center a layout and use a relative positioned menu, and using auto margins can cause problems in some IE browsers. Using generic css tags for table, td, tr, sometimes padding and margin can also result in problems, but that is in specific instances and certain browsers. There are a lot of variables so that is something we just answer in the forum for now.

Ruth

[JB car pages]

Yes, that's good.

Has this existed before? If so, I might have to look around a little more in the future.

Regarding the css: I just posted that for future reference in the forums, if someone encounters the same problem. I always search the forums first, before posting, so this might help others who do the same.

Thanks for your help.

[Ruth]

Hi,

Yes, it's been there, it's from a link in the beginners' forum, which in reality is not a forum since it's locked, it's just a help for beginners section. There is also the following. Some can be found in the beginners' forum section and some under the main site menu Support/Tech Support Documents.

http://support.milonic.com/beginners/borders.htm

http://support.milonic.com/beginners/css_styling/

http://support.milonic.com/demos/

Ruth

[akfgfan]

I also encountered a problem in Firefox, where the submenus wouldn't align with the parent buttons.

I'm having this problem with current Firefox users. When they use the menu, the submenus don't align correctly to the parent button. Here's an example: http://i11.tinypic.com/4hn3l92.jpg

A user sent this picture. They are trying to scroll over "Pictures" and the submenu is showing up way to the left by "Discography". The "Milonic" button has also disappeared from the menu in Firefox. I'm not quite sure what the problem is. The menu works fine in all other browsers. I also tried using this guide, but the entire position of my menu gets screwed up when I follow the steps:
http://support.milonic.com/beginners/ta ... /index.htm

If anyone has any suggestions, I'd be very grateful. Here is my website: http://www.akfgfan.com/

[Ruth]

Hi,

Are you placing the menu in the table or are you placing it absolutely using top and left?? You need to use one or the other.

Your page source shows a call for the 3 menu files in the head right below the shortcut icon link, and also a call for the 3 menu files in the table cell which also is surrounded by a div aligned left. Finally, if you are putting it in a table cell take a look at the directions for doing that. If following these directions still doesn't solve the problem post back.


http://support.milonic.com/beginners/ta ... /index.htm

Ruth

[akfgfan]

Actually, I have already taken a look at that link and tried it. When I do as it says, the submenus don't even work and it moves my menu to the top left.

My menu is in a table. I don't use "left", but I had to use "top" to get the menu below my banner. Without "top=220", for some reason the menu won't stay in the table position. Let me paste my code below and perhaps you'll find an error that I'm missing.

*Index Page*

Code: Select all

<html>
<head>
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<title>ASIAN KUNG-FU GENERATION FLASH BACK!</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta name="keywords" content="asian kung-fu generation, kung-fu, music, guitar tabs, lyrics, flash back, discography, picture, video, wallpaper, gotoh, masafumi, kensuke, ijichi, yamada">
	<meta name="description" content="Welcome to ASIAN KUNG FU GENERATION Flash Back! This is a fansite devoted to the band Asian Kung-Fu Generation. Here you'll find background info, discography, lyrics, pics, guitar tabs, news, music, links, recommended artists, and more!">
	<meta name="copyright" content="Flash Back">
<link rel="stylesheet" href="http://websites.milonic.com/akfgfan.com/mycss.css" type="text/css">
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<script type="text/javascript" src="milonic_src.js"></script>	
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>	
<style type="text/css">
body
{ background: #F2EAD3;
  background-position: top center;
  background-repeat: repeat-y;
}
</style>

</head>
<body>
	
<table width="800" border="2" bordercolor="#000000" bgcolor="#FFFFFF" align="center" cellpadding="0" cellspacing="0">
<tr>
	<td><img src="http://www.akfgfan.com/pictures/header32.jpg" border="0"></img></td>
</tr>
<tr>
	<td><table width="800" border="0" cellpadding="0" cellspacing="0">
	  <tr>
		<td width="800" height="20" valign="top" bgcolor="#000000"><div align="left">
<script type="text/javascript" src="milonic_src.js"></script>	
<script type="text/javascript" src="mmenudom.js"></script> 
<script type="text/javascript" src="menu_data.js"></script>
</div></td>
	  </tr>
	</table>
	<table width="800" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="170" valign="top" bgcolor="#000000"><div align="left"><br>
<br>
<center><img src="search.gif" border="0"></img></center>
<FORM ACTION="http://search.freefind.com/find.html" METHOD="GET" accept-charset="utf-8" target="_self">
<FONT size=1 face="arial,helvetica" >
<INPUT TYPE="HIDDEN" NAME="id" VALUE="69349711">
<INPUT TYPE="HIDDEN" NAME="pageid" VALUE="r">
<INPUT TYPE="HIDDEN" NAME="mode" VALUE="ALL">
<INPUT type="HIDDEN" name="n" value="0">
<INPUT TYPE="HIDDEN" NAME="_charset_" VALUE="">
<INPUT TYPE="HIDDEN" NAME="bcd" VALUE="÷">
<INPUT TYPE="TEXT" NAME="query" SIZE="15"><small> 
<INPUT TYPE="SUBMIT" VALUE=" Find "><br>
</small>powered by <A href="http://websites.milonic.com/freefind.com">
FreeFind</A></font></FORM>
<br>
<br>
<center><img src="releases.gif" border="0"></img></center>
<center><a href="http://websites.milonic.com/us.yesasia.com/assocred.asp?4WNTM9AL+http://us.yesasia.com/en/PrdDept.aspx/code-j/section-music/pid-1004541731/" target="_blank"><img src="pictures/adv4.jpg" border="0"></img></a></center><br>
<br>
<center><a href="http://websites.milonic.com/us.yesasia.com/assocred.asp?4WNTM9AL+http://us.yesasia.com/en/PrdDept.aspx/code-j/section-music/pid-1004510597/" target="_blank"><img src="pictures/adv2.jpg" border="0"></img></a></center><br>
<br>
<center><a href="http://websites.milonic.com/us.yesasia.com/assocred.asp?4WNTM9AL+http://us.yesasia.com/en/artIdxDept.aspx/code-j/section-music/aid-509620/" target="_blank"><img src="pictures/adv.jpg" border="0"></img></a></center><br>
<br>
<br>
<center><img src="rings.gif" border="0"></img></center>
                  <center><a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/home.pl?ringid=jrock;siteid=asiankungfufan" target="_top">:: jrocker.com ring ::<br>
                  <img src="http://www.jrocker.com/ring.jpg" alt="Asian Kung-Fu Generation FB Jrocker Ring" width=150 height=75 border=0></a><br>
                  <a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/prev.pl?ringid=jrock;siteid=asiankungfufan" target="_top"><<</a> 
                  <a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/rand.pl?ringid=jrock;siteid=asiankungfufan" target="_top">??</a> 
                  <a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/next.pl?ringid=jrock;siteid=asiankungfufan" target="_top">>></a> 
                  <a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/list.pl?ringid=jrock;siteid=asiankungfufan" target="_top">list</a></center><br>
<br>
</div></td>
		<td width="630" valign="top" bgcolor="#FFFFFF"><div id="contentpadding">
<br>
<iframe src="http://www.akfgfan.com/mylog.php" name="main" scroll="no" width="610" height="750" frameborder="0" align="top"></iframe>


</div>
</td>
</tr>
</table></td>
</tr>
</table></body>
</html>

*Menu Code*

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(XPMainStyle=new mm_style()){
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
fontfamily="Tahoma,Verdana,Arial";
fontsize="70%";
fontstyle="normal";
fontweight="normal";
offbgcolor="#000000";
offcolor="#FFFFFF";
onbgcolor="#F7E0B7";
onborder="1px solid #AF1E3C";
oncolor="#000000";
overbgimage="http://www.akfgfan.com/images/orange_office2003.gif";
padding=3;
}

with(XPMenuStyle=new mm_style()){
styleid=1;
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
fontfamily="Tahoma,Verdana,Arial";
fontsize="70%";
fontstyle="normal";
fontweight="normal";
image="http://www.akfgfan.com/images/xpblank.gif";
imagepadding=3;
menubgimage="http://www.akfgfan.com/images/backoff2003_web.gif";
offbgcolor="transparent";
offcolor="#FFFFFF";
onbgcolor="#F7E0B7";
onborder="1px solid #AF1E3C";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Inset(duration=0.5);Shadow(color=#AD2545', Direction=135, Strength=5)";
padding=4;
separatoralign="right";
separatorcolor="#C93E52";
separatorpadding=4;
separatorwidth="80%";
subimage="http://www.akfgfan.com/images/arrow.gif";
subimagepadding=3;
menubgcolor="#6E716F";
}

with(home=new menuname("Main Menu")){
alwaysvisible=1;
align="center";
margin=2;
orientation="horizontal";
style=XPMainStyle;
top=220;
menuwidth="800";
aI("text=Home;url=http://www.akfgfan.com;");
aI("showmenu=News;text=:News:  ;");
aI("text=:Profile:  ;url=http://www.akfgfan.com/news.php;");
aI("showmenu=Discography;text=:Discography:  ;");
aI("showmenu=Reviews;text=:Reviews:  ;");
aI("text=:Lyrics:  ;url=http://www.akfgfan.com/lyrics;");
aI("showmenu=Pictures;text=:Pictures:  ;");
aI("showmenu=Audio;text=:Audio:  ;");
aI("text=:Music Tabs:  ;url=http://www.akfgfan.com/guitartabs.php;");
aI("showmenu=CoolS;text=:Misc:  ;");
aI("text=:Links:  ;url=http://www.akfgfan.com/links.php;");
aI("text=:Contact: ;url=mailto:phoenix-fire@cox.net;");
}

with(milonic=new menuname("News")){
margin=2;
overflow="scroll";
style=XPMenuStyle;
aI("text=Releases;url=http://www.akfgfan.com/releasenews.php;")
aI("text=Concerts;url=http://www.akfgfan.com/candfnews.php;")
aI("text=Cool News;url=http://www.akfgfan.com/coolnews.php;")
aI("text=Sales Updates;url=http://www.akfgfan.com/news.php;")
}

with(milonic=new menuname("Discography")){
margin=2;
style=XPMenuStyle;
aI("text=Albums;url=http://www.akfgfan.com/albums.php;");
aI("text=Singles;url=http://www.akfgfan.com/singles.php;");
aI("text=Indie CDs;url=http://www.akfgfan.com/earlyworks.php;");
aI("text=DVDs;url=http://www.akfgfan.com/akgdvd.php;");
aI("text=Other CDs;url=http://www.akfgfan.com/othercds.php;");
}

with(milonic=new menuname("Reviews")){
margin=2;
style=XPMenuStyle;
aI("text=Aru Machi no Gunjou;url=http://www.akfgfan.com/arumachinogunjoureview.php;");
aI("text=Feedback File;url=http://www.akfgfan.com/feedbackfilereview.php;");
aI("text=Nano-Mugen 2006;url=http://www.akfgfan.com/nanomugen06review.php;");
aI("text=More Reviews...;url=http://www.akfgfan.com/akgreview.php;");
aI("text=Interviews;url=http://www.akfgfan.com/articleinterview.php;");
}

with(milonic=new menuname("Pictures")){
margin=2;
style=XPMenuStyle;
aI("text=Group Pictures;url=http://www.akfgfan.com/grouppics.php;");
aI("text=Live Pictures;url=http://www.akfgfan.com/livepics03.php;");
aI("text=Magazine Scans;url=http://www.akfgfan.com/mag.php;");
aI("text=Radio Pictures;url=http://www.akfgfan.com/radio2.php;");
aI("text=CD Covers;url=http://www.akfgfan.com/cdcovers.php;");
aI("text=Avatars;url=http://www.akfgfan.com/avatars.php;");
aI("text=Wallpapers;url=http://www.akfgfan.com/wallpaper.php;");
}

with(milonic=new menuname("Audio")){
margin=2;
style=XPMenuStyle;
aI("text=Music;url=http://www.akfgfan.com/musicred.php;");
aI("text=Radio Clips;url=http://www.akfgfan.com/radiobits.php;");
}

with(milonic=new menuname("CoolS")){
margin=2;
style=XPMenuStyle;
aI("text=Official iPOD Playlist;url=http://www.akfgfan.com/ipodlist.php;");
aI("text=Fan Fiction;url=http://www.akfgfan.com/fanstory.php;");
aI("text=Polls;url=http://www.akfgfan.com/polls.php;");
aI("text=2006 Recap;url=http://www.akfgfan.com/2006recap.php;");
aI("text=2005 Recap;url=http://www.akfgfan.com/2005recap.php;");
aI("text=2004 Recap;url=http://www.akfgfan.com/2004recap.php;");
aI("text=About the Site;url=http://www.akfgfan.com/aboutsite.php;");
aI("text=Guestbook;url=http://www.akfgfan.com/guestbook.php;");
}

drawMenus();

[/code]

[Ruth]

Hi,

Based on your page, as I noted in my reply, in the head of the document there is a call for the program files and menu data file

Code: Select all

<html>
<head>...
<script type="text/javascript" src="milonic_src.js"></script>	
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>	
...
</head>

Then in the body there is another call for all the files

Code: Select all

<body>
	
...	  <tr>
		<td width="800" height="20" valign="top" bgcolor="#000000"><div align="left">
<script type="text/javascript" src="milonic_src.js"></script>	
<script type="text/javascript" src="mmenudom.js"></script> 
<script type="text/javascript" src="menu_data.js"></script>
</div></td>
	  </tr> ...
</body>

This might cause problems, but the real problem is that neither acceptable method for placing the menu in a table cell has been used.

Using method one, instead of what you have in the menu data file at the top

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;

there should be a buildAfterLoad=true; as shown in the example

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;
buildAfterLoad=true;

Nor have you changed the main menu, removing top and left and ADDING position="relative"; Your data says

Code: Select all

with(home=new menuname("Main Menu")){
alwaysvisible=1;
align="center";
margin=2;
orientation="horizontal";
style=XPMainStyle;
top=220;
menuwidth="800";
...

When following the information for relative positioned menus using either method requires the position="relative";

Code: Select all

with(home=new menuname("Main Menu")){
alwaysvisible=1;
align="center";
margin=2;
orientation="horizontal";
style=XPMainStyle;
position="relative";
menuwidth="800";
...

In the second method, you would not put in buildAfterLoad="true"; instead you would cut out the main menu, add the position="relative"; to it and also add a drawMenus(); at the end and save it as its own file, say embed_main.js. Then you would only call that file in the able cell while putting the call for the other files, the menu_data.js file included which no longer has a main menu in it, right after the body tag of the html page before anything else on the page.

Both work as I've tested them on your page.

Ruth

[akfgfan]

Alright, I tried option 1 again and also removed the extra javascript from the header part. The position is okay now, but the submenu doesn't work now in IE. You can see a partial edge of the submenu's border appear but that is it. You can check it out on my test site: http://www.akfgfan.com/test


Here is my menu file:

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; 
buildAfterLoad=true; 




with(XPMainStyle=new mm_style()){
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
fontfamily="Tahoma,Verdana,Arial";
fontsize="70%";
fontstyle="normal";
fontweight="normal";
offbgcolor="#000000";
offcolor="#FFFFFF";
onbgcolor="#F7E0B7";
onborder="1px solid #AF1E3C";
oncolor="#000000";
overbgimage="http://www.akfgfan.com/images/orange_office2003.gif";
padding=3;
}

with(XPMenuStyle=new mm_style()){
styleid=1;
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
fontfamily="Tahoma,Verdana,Arial";
fontsize="70%";
fontstyle="normal";
fontweight="normal";
image="http://www.akfgfan.com/images/xpblank.gif";
imagepadding=3;
menubgimage="http://www.akfgfan.com/images/backoff2003_web.gif";
offbgcolor="transparent";
offcolor="#FFFFFF";
onbgcolor="#F7E0B7";
onborder="1px solid #AF1E3C";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Inset(duration=0.5);Shadow(color=#AD2545', Direction=135, Strength=5)";
padding=0;
separatoralign="right";
separatorcolor="#C93E52";
separatorpadding=4;
separatorwidth="80%";
subimage="http://www.akfgfan.com/images/arrow.gif";
subimagepadding=0;
menubgcolor="#6E716F";
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
align="center";
margin=2;
orientation="horizontal";
style=XPMainStyle;
position="relative";
menuwidth="800";
aI("text=Home;url=http://www.akfgfan.com;");
aI("showmenu=News;text=:News:  ;");
aI("text=:Profile:  ;url=http://www.akfgfan.com/news.php;");
aI("showmenu=Discography;text=:Discography:  ;");
aI("showmenu=Reviews;text=:Reviews:  ;");
aI("text=:Lyrics:  ;url=http://www.akfgfan.com/lyrics;");
aI("showmenu=Pictures;text=:Pictures:  ;");
aI("showmenu=Audio;text=:Audio:  ;");
aI("text=:Music Tabs:  ;url=http://www.akfgfan.com/guitartabs.php;");
aI("showmenu=CoolS;text=:Misc:  ;");
aI("text=:Links:  ;url=http://www.akfgfan.com/links.php;");
aI("text=:Contact: ;url=mailto:phoenix-fire@cox.net;");
}

with(milonic=new menuname("News")){
margin=2;
overflow="scroll";
style=XPMenuStyle;
aI("text=Releases;url=http://www.akfgfan.com/releasenews.php;")
aI("text=Concerts;url=http://www.akfgfan.com/candfnews.php;")
aI("text=Cool News;url=http://www.akfgfan.com/coolnews.php;")
aI("text=Sales Updates;url=http://www.akfgfan.com/news.php;")
}

with(milonic=new menuname("Discography")){
margin=2;
style=XPMenuStyle;
aI("text=Albums;url=http://www.akfgfan.com/albums.php;");
aI("text=Singles;url=http://www.akfgfan.com/singles.php;");
aI("text=Indie CDs;url=http://www.akfgfan.com/earlyworks.php;");
aI("text=DVDs;url=http://www.akfgfan.com/akgdvd.php;");
aI("text=Other CDs;url=http://www.akfgfan.com/othercds.php;");
}

with(milonic=new menuname("Reviews")){
margin=2;
style=XPMenuStyle;
aI("text=Aru Machi no Gunjou;url=http://www.akfgfan.com/arumachinogunjoureview.php;");
aI("text=Feedback File;url=http://www.akfgfan.com/feedbackfilereview.php;");
aI("text=Nano-Mugen 2006;url=http://www.akfgfan.com/nanomugen06review.php;");
aI("text=More Reviews...;url=http://www.akfgfan.com/akgreview.php;");
aI("text=Interviews;url=http://www.akfgfan.com/articleinterview.php;");
}

with(milonic=new menuname("Pictures")){
margin=2;
style=XPMenuStyle;
aI("text=Group Pictures;url=http://www.akfgfan.com/grouppics.php;");
aI("text=Live Pictures;url=http://www.akfgfan.com/livepics03.php;");
aI("text=Magazine Scans;url=http://www.akfgfan.com/mag.php;");
aI("text=Radio Pictures;url=http://www.akfgfan.com/radio2.php;");
aI("text=CD Covers;url=http://www.akfgfan.com/cdcovers.php;");
aI("text=Avatars;url=http://www.akfgfan.com/avatars.php;");
aI("text=Wallpapers;url=http://www.akfgfan.com/wallpaper.php;");
}

with(milonic=new menuname("Audio")){
margin=2;
style=XPMenuStyle;
aI("text=Music;url=http://www.akfgfan.com/musicred.php;");
aI("text=Radio Clips;url=http://www.akfgfan.com/radiobits.php;");
}

with(milonic=new menuname("CoolS")){
margin=2;
style=XPMenuStyle;
aI("text=Official iPOD Playlist;url=http://www.akfgfan.com/ipodlist.php;");
aI("text=Fan Fiction;url=http://www.akfgfan.com/fanstory.php;");
aI("text=Polls;url=http://www.akfgfan.com/polls.php;");
aI("text=2006 Recap;url=http://www.akfgfan.com/2006recap.php;");
aI("text=2005 Recap;url=http://www.akfgfan.com/2005recap.php;");
aI("text=2004 Recap;url=http://www.akfgfan.com/2004recap.php;");
aI("text=About the Site;url=http://www.akfgfan.com/aboutsite.php;");
aI("text=Guestbook;url=http://www.akfgfan.com/guestbook.php;");
}

drawMenus();

If you see any possible errors, let me know. Its late so I will try option 2 tomorrow while I wait for a reply.

[Ruth]

Hi,

I am unable to find the problem. I see it on your site, but I can't see the problem when I put your page on my site but call all the files from your site


That's strange since I set the page at my site to use your files from your site, they should be the same. I didn't make any changes to the page except to add your site url to get the files. I tried in IE5.5, and IE6.

I can suggest a couple of things to test and if they don't work, we'll have to try the second method for putting the menu in a table/div and see what happens with that one.

Try removing the overflow='scroll'; from the submenus. If that doesn't do it, try removing the overfilter and outfilter codes from the style for the submenus.

EDIT: one thing I just noticed, there is a hanging single quote in your outfilter code Shadow(color=#AD2545', maybe that's doing it, but still since I am getting the files from your site, it should do it on my site also.

just for info, there is a demo/tool for testing those codes to see what you'd like http://support.milonic.com/demos/ It's the first one I think.

Ruth

[akfgfan]

Okay, I tried removing overflow, overfilter, and outfilter, but it still wasn't showing up correctly. I also fixed that one coding problem with Shadow.

So then I tried doing option #2. This made my menu even worse ^ ^! Basically there is no menu now (http://www.akfgfan.com/test). Below is my index and menu coding:

*Index*

Code: Select all

<html>
<head>
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<title>ASIAN KUNG-FU GENERATION FLASH BACK!</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta name="keywords" content="asian kung-fu generation, kung-fu, music, guitar tabs, lyrics, flash back, discography, picture, video, wallpaper, gotoh, masafumi, kensuke, ijichi, yamada">
	<meta name="description" content="Welcome to ASIAN KUNG FU GENERATION Flash Back! This is a fansite devoted to the band Asian Kung-Fu Generation. Here you'll find background info, discography, lyrics, pics, guitar tabs, news, music, links, recommended artists, and more!">
	<meta name="copyright" content="Flash Back">
<link rel="stylesheet" href="http://websites.milonic.com/akfgfan.com/test/mycss.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico">	
<style type="text/css">
body
{ background: #F2EAD3;
  background-position: top center;
  background-repeat: repeat-y;
}
</style>

</head>
<body>
	<script type="text/javascript" src="milonic_src.js">
</script>  <script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript
  src=mmenuns4.js><\/scr"+"ipt>"); 
 else _d.write("<scr"+"ipt type=text/javascript
 src=mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="subs_data.js">
</script>


<table width="800" border="2" bordercolor="#000000" bgcolor="#FFFFFF" align="center" cellpadding="0" cellspacing="0">
<tr>
	<td><img src="http://www.akfgfan.com/pictures/header32.jpg" border="0"></img></td>
</tr>
<tr>
	<td><table width="800" border="0" cellpadding="0" cellspacing="0">
	  <tr>
		<td width="800" height="20" valign="top" bgcolor="#000000">
		<script type="text/javascript" src="embedded_main_menu.js"></script></td>
	  </tr>
	</table>
	<table width="800" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="170" valign="top" bgcolor="#000000"><div align="left"><br>
<br>
<center><img src="search.gif" border="0"></img></center>
<FORM ACTION="http://search.freefind.com/find.html" METHOD="GET" accept-charset="utf-8" target="_self">
<FONT size=1 face="arial,helvetica" >
<INPUT TYPE="HIDDEN" NAME="id" VALUE="69349711">
<INPUT TYPE="HIDDEN" NAME="pageid" VALUE="r">
<INPUT TYPE="HIDDEN" NAME="mode" VALUE="ALL">
<INPUT type="HIDDEN" name="n" value="0">
<INPUT TYPE="HIDDEN" NAME="_charset_" VALUE="">
<INPUT TYPE="HIDDEN" NAME="bcd" VALUE="÷">
<INPUT TYPE="TEXT" NAME="query" SIZE="15"><small> 
<INPUT TYPE="SUBMIT" VALUE=" Find "><br>
</small>powered by <A href="http://websites.milonic.com/freefind.com">
FreeFind</A></font></FORM>
<br>
<br>
<center><img src="releases.gif" border="0"></img></center>
<center><a href="http://websites.milonic.com/us.yesasia.com/assocred.asp?4WNTM9AL+http://us.yesasia.com/en/PrdDept.aspx/code-j/section-music/pid-1004541731/" target="_blank"><img src="pictures/adv4.jpg" border="0"></img></a></center><br>
<br>
<center><a href="http://websites.milonic.com/us.yesasia.com/assocred.asp?4WNTM9AL+http://us.yesasia.com/en/PrdDept.aspx/code-j/section-music/pid-1004510597/" target="_blank"><img src="pictures/adv2.jpg" border="0"></img></a></center><br>
<br>
<center><a href="http://websites.milonic.com/us.yesasia.com/assocred.asp?4WNTM9AL+http://us.yesasia.com/en/artIdxDept.aspx/code-j/section-music/aid-509620/" target="_blank"><img src="pictures/adv.jpg" border="0"></img></a></center><br>
<br>
<br>
<center><img src="rings.gif" border="0"></img></center>
                  <center><a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/home.pl?ringid=jrock;siteid=asiankungfufan" target="_top">:: jrocker.com ring ::<br>
                  <img src="http://www.jrocker.com/ring.jpg" alt="Asian Kung-Fu Generation FB Jrocker Ring" width=150 height=75 border=0></a><br>
                  <a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/prev.pl?ringid=jrock;siteid=asiankungfufan" target="_top"><<</a> 
                  <a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/rand.pl?ringid=jrock;siteid=asiankungfufan" target="_top">??</a> 
                  <a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/next.pl?ringid=jrock;siteid=asiankungfufan" target="_top">>></a> 
                  <a href="http://websites.milonic.com/jrocker.com/jrocker-bin/ringlink/list.pl?ringid=jrock;siteid=asiankungfufan" target="_top">list</a></center><br>
<br>
</div></td>
		<td width="630" valign="top" bgcolor="#FFFFFF"><div id="contentpadding">
<br>
<iframe src="http://www.akfgfan.com/mylog.php" name="main" scroll="no" width="600" height="800" frameborder="0" align="top"></iframe>

</div>

</td>
</tr>
</table></td>
</tr>
</table></body>
</html>

*embedded_main_menu.js*

Code: Select all

with(milonic=new menuname("Main Menu")){ 
alwaysvisible=1; 
align="center"; 
margin=2; 
orientation="horizontal"; 
style=XPMainStyle; 
position="relative"; 
menuwidth="800"; 
aI("text=Home;url=http://www.akfgfan.com;"); 
aI("showmenu=News;text=:News:  ;"); 
aI("text=:Profile:  ;url=http://www.akfgfan.com/news.php;"); 
aI("showmenu=Discography;text=:Discography:  ;"); 
aI("showmenu=Reviews;text=:Reviews:  ;"); 
aI("text=:Lyrics:  ;url=http://www.akfgfan.com/lyrics;"); 
aI("showmenu=Pictures;text=:Pictures:  ;"); 
aI("showmenu=Audio;text=:Audio:  ;"); 
aI("text=:Music Tabs:  ;url=http://www.akfgfan.com/guitartabs.php;"); 
aI("showmenu=CoolS;text=:Misc:  ;"); 
aI("text=:Links:  ;url=http://www.akfgfan.com/links.php;"); 
aI("text=:Contact: ;url=mailto:phoenix-fire@cox.net;"); 
} 


drawMenus(); 

*sub_data.js*

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(XPMainStyle=new mm_style()){ 
bordercolor="#8A867A"; 
borderstyle="solid"; 
borderwidth=1; 
fontfamily="Tahoma,Verdana,Arial"; 
fontsize="70%"; 
fontstyle="normal"; 
fontweight="normal"; 
offbgcolor="#000000"; 
offcolor="#FFFFFF"; 
onbgcolor="#F7E0B7"; 
onborder="1px solid #AF1E3C"; 
oncolor="#000000"; 
overbgimage="http://www.akfgfan.com/images/orange_office2003.gif"; 
padding=3; 
} 

with(XPMenuStyle=new mm_style()){ 
styleid=1; 
bordercolor="#8A867A"; 
borderstyle="solid"; 
borderwidth=1; 
fontfamily="Tahoma,Verdana,Arial"; 
fontsize="70%"; 
fontstyle="normal"; 
fontweight="normal"; 
image="http://www.akfgfan.com/images/xpblank.gif"; 
imagepadding=3; 
menubgimage="http://www.akfgfan.com/images/backoff2003_web.gif"; 
offbgcolor="transparent"; 
offcolor="#FFFFFF"; 
onbgcolor="#F7E0B7"; 
onborder="1px solid #AF1E3C"; 
oncolor="#000000"; 
outfilter="randomdissolve(duration=0.3)"; 
overfilter="Inset(duration=0.5);Shadow(color=#AD2545', Direction=135, Strength=5)"; 
padding=0; 
separatoralign="right"; 
separatorcolor="#C93E52"; 
separatorpadding=4; 
separatorwidth="80%"; 
subimage="http://www.akfgfan.com/images/arrow.gif"; 
subimagepadding=0; 
menubgcolor="#6E716F"; 
} 



with(milonic=new menuname("News")){ 
margin=2; 
overflow="scroll"; 
style=XPMenuStyle; 
aI("text=Releases;url=http://www.akfgfan.com/releasenews.php;") 
aI("text=Concerts;url=http://www.akfgfan.com/candfnews.php;") 
aI("text=Cool News;url=http://www.akfgfan.com/coolnews.php;") 
aI("text=Sales Updates;url=http://www.akfgfan.com/news.php;") 
} 

with(milonic=new menuname("Discography")){ 
margin=2; 
style=XPMenuStyle; 
aI("text=Albums;url=http://www.akfgfan.com/albums.php;"); 
aI("text=Singles;url=http://www.akfgfan.com/singles.php;"); 
aI("text=Indie CDs;url=http://www.akfgfan.com/earlyworks.php;"); 
aI("text=DVDs;url=http://www.akfgfan.com/akgdvd.php;"); 
aI("text=Other CDs;url=http://www.akfgfan.com/othercds.php;"); 
} 

with(milonic=new menuname("Reviews")){ 
margin=2; 
style=XPMenuStyle; 
aI("text=Aru Machi no Gunjou;url=http://www.akfgfan.com/arumachinogunjoureview.php;"); 
aI("text=Feedback File;url=http://www.akfgfan.com/feedbackfilereview.php;"); 
aI("text=Nano-Mugen 2006;url=http://www.akfgfan.com/nanomugen06review.php;"); 
aI("text=More Reviews...;url=http://www.akfgfan.com/akgreview.php;"); 
aI("text=Interviews;url=http://www.akfgfan.com/articleinterview.php;"); 
} 

with(milonic=new menuname("Pictures")){ 
margin=2; 
style=XPMenuStyle; 
aI("text=Group Pictures;url=http://www.akfgfan.com/grouppics.php;"); 
aI("text=Live Pictures;url=http://www.akfgfan.com/livepics03.php;"); 
aI("text=Magazine Scans;url=http://www.akfgfan.com/mag.php;"); 
aI("text=Radio Pictures;url=http://www.akfgfan.com/radio2.php;"); 
aI("text=CD Covers;url=http://www.akfgfan.com/cdcovers.php;"); 
aI("text=Avatars;url=http://www.akfgfan.com/avatars.php;"); 
aI("text=Wallpapers;url=http://www.akfgfan.com/wallpaper.php;"); 
} 

with(milonic=new menuname("Audio")){ 
margin=2; 
style=XPMenuStyle; 
aI("text=Music;url=http://www.akfgfan.com/musicred.php;"); 
aI("text=Radio Clips;url=http://www.akfgfan.com/radiobits.php;"); 
} 

with(milonic=new menuname("CoolS")){ 
margin=2; 
style=XPMenuStyle; 
aI("text=Official iPOD Playlist;url=http://www.akfgfan.com/ipodlist.php;"); 
aI("text=Fan Fiction;url=http://www.akfgfan.com/fanstory.php;"); 
aI("text=Polls;url=http://www.akfgfan.com/polls.php;"); 
aI("text=2006 Recap;url=http://www.akfgfan.com/2006recap.php;"); 
aI("text=2005 Recap;url=http://www.akfgfan.com/2005recap.php;"); 
aI("text=2004 Recap;url=http://www.akfgfan.com/2004recap.php;"); 
aI("text=About the Site;url=http://www.akfgfan.com/aboutsite.php;"); 
aI("text=Guestbook;url=http://www.akfgfan.com/guestbook.php;"); 
} 

drawMenus(); 

[Ruth]

Hi,

You have an error in the call for the scripts, in the if/else section. It is wrapping, I think

Code: Select all

<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>"); 
 else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</script>

Try that, and make sure the if line and the else line don't wrap. It should look like it does inside this code bracket.

Also, I think that if your page is xml/xhtml that those are supposed to be in cdata tags. If you don't get users of NN4 you can just eliminate that call, and have just

Code: Select all

<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript" src="mmenudom.js"></script>

and your call for the subs_data.js file

Ruth

[akfgfan]

Thanks so much Ruth! Everything seems to be working fine now and a few users confirmed that the test page works in Firefox now.

I have one small question. Is there any way to have the menu items span the entire length of the menu? I've tried specifying itemwidth for each menu before, but it didn't seem to have any effect.

[liz]

hi
i've tried your solutions in this forum related to this , but my problem still persists. everything works great in firefox, but the submenus are in the wrong place in ie.

please view my page at : http://smartsitedesign.com/johnW/

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=150;
_subOffsetTop=100;
_subOffsetLeft=740;
_buildAfterLoad=true;


with(mainStyle=new mm_style()){
//bordercolor="#999999";
//borderstyle="solid";
borderwidth=0;
fontfamily="Arial, Helvetica, sans-serif";
fontsize="85%";
fontstyle="normal";
fontweight:"bold";
//headerbgcolor="#ffffff";
//headercolor="#000000";
//offbgcolor="#eeeeee";
offcolor="#000000";
//onbgcolor="#ddffdd";
oncolor="#0000ff";
//outfilter="randomdissolve(duration=0.3)";
//overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
//subimage="http://milonic.com/menuimages/arrow.gif";
//subimagepadding=2;
}

with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial, Helvetica, sans-serif";
fontsize="75%";
fontstyle="normal";
//headerbgcolor="#ffffff";
//headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="#000000";
onbgcolor="#dddddd";
oncolor="#0000ff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=3;
//pagebgcolor="#82B6D7";
//pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
//subimage="http://milonic.com/menuimages/arrow.gif";
//subimagepadding=2;
}




with(milonic=new menuname("Galleries")){
//overflow="scroll";
style=menuStyle;
aI("text=2007 Paintings;url=2007/index.htm;")
aI("text=2006 Paintings;url=2006/index.htm;")
aI("text=2005 Paintings;url=2005/index.htm;")
aI("text=2004 and Earlier;url=2004/index.htm;")
aI("text=Watercolors;url=watercolors/index.htm;")
aI("text=Sculptures;url=sculptures/index.htm;")
}


with(milonic=new menuname("About John")){
style=menuStyle;
aI("text=Bio;url=bio.htm;");
aI("text=Artist's Statement;url=statement.htm;");
}

drawMenus();

and here is my webpage code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>John Whitehouse, Artist</title>
<!-- TemplateEndEditable --><link href="style.css" rel="stylesheet" type="text/css">
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body>

<div align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<!--HEADER AND TOP MENU--> <tr>
<td width="800">
<table width="800" style="background-image:url(images/background.jpg);"><tr>

<td class="header" width="544">John Whitehouse, Artist   <img src="images/brush2%20100x35.gif" width="100" height="35"><br><img src="images/spacer.gif" width="522" height="1"></td>
<!-- drop down main menu -->
<td class="headerMenu" width="256">
<SCRIPT type="text/javascript" src="menu/milonic_src.js"></SCRIPT>
<script type="text/javascript">
<!--
if(ns4)_d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=menu/mmenuns4.js><\/SCR"+"IPT>");
else _d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=menu/mmenudom.js><\/SCR"+"IPT>");
-->
</SCRIPT>
<SCRIPT type="text/javascript" src="menu/menu_data.js"></SCRIPT>

<SCRIPT TYPE="text/javascript">
with(new menuname("Main Menu")){
style=mainStyle;
alwaysvisible=1;
position="relative";
orientation="horizontal";
aI("text=Home;url=http://www.johnwhitehouse.com/;");
aI("showmenu=Galleries;text=Galleries;");
aI("text=Exhibits;url=exhibits.htm;");
aI("showmenu=About John;text=About John;");
aI("text=Contact John;url=contact.htm;");
}
drawMenus();
</SCRIPT>

</td>
<!-- /drop down main menu -->
</tr>
</table>
</td>
</tr>
<!-- /HEADER-->

<tr>
<td>
<table width="756" border="0" cellspacing="0" cellpadding="0" class="contentTable">
<tr>
<td width="234"> </td>
<td width="22"><img src="images/spacer.gif" alt="" width="22" height="30"></td>
<td width="500"></td>
</tr>
<!--CONTENT TABLE-->
<tr>
<td valign="top" style="text-align:justify"><!-- TemplateBeginEditable name="EditRegionContentText " -->
<p>Ad ipsum lorem eoiru erjer jherjkh erelkrj erkje rerkj. erer kerjh erenkrererjherkjeh erhewr. rj er </p>
<p>ekrjh erlkejr ekjer. koireh erejkrereruhererjer er. ejrhew rewr.</p>
<p> </p>
<!-- TemplateEndEditable --></td>
<td> </td>
<td valign="top"><!-- TemplateBeginEditable name="EditRegionContentImage" --><img src="images/randonhome/ParkBlocks.jpg" width="500" height="379" alt="Park Blocks"><!-- TemplateEndEditable --></td>
</tr>
<!-- /CONTENT TABLE-->
<tr>
<td width="22" style="line-height:22px;"> </td>
<td> </td>
<td> </td>
</tr>
</table>


</td>
</tr>

<!--footer-->
<tr>
<td class="footer" width="800"> </td>
</tr>
<!-- /footer-->
</table>
</div>
</body>
</html>


thanks so much for your help.

[Ruth]

Hi

akfgfan: To make the menu span across set it to menuwidth=770; and itemwidth="100%": The reason for the 700 instead of 800 is that at 800x600 resolution there is not actually 800px wide available and part of your page is beyond the right border, and for whatever reason in IE5.5 the bottom scroll bar does not appear.

Liz:

You've made an error in how you put the menu in the table, you used the first method of buildAfterLoad=true, but then you also put the main menu into the table cell. That's not the problem, but you should put it back in the menu_data.js file if you are using that method. No drawMenus(); after the main menu, just this right above the galleries submenu

Code: Select all

with(new menuname("Main Menu")){
 style=mainStyle;
 alwaysvisible=1;
 position="relative";
orientation="horizontal";
aI("text=Home;url=http://www.johnwhitehouse.com/;");
aI("showmenu=Galleries;text=Galleries;");
aI("text=Exhibits;url=exhibits.htm;");
aI("showmenu=About John;text=About John;");
aI("text=Contact John;url=contact.htm;");
}

Now, the problem with the submenu position has to do with the css, the vertical-align:bottom part. This is fixable by setting it up like this instead. This will be what you'll have in between your <!-- notes for the drop down menu.

Code: Select all

<!-- drop down main menu -->
          <TD width=256 valign='bottom'><table cellpadding=0 cellspacing=0>
<tr>
    <td><SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>

            <SCRIPT type=text/javascript>
<!--
if(ns4)_d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=mmenuns4.js><\/SCR"+"IPT>");
else _d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=mmenudom.js><\/SCR"+"IPT>");
-->
</SCRIPT>

            <SCRIPT src="menu_data.js" type=text/javascript></SCRIPT></td>
</tr>
</table>
          </TD><!-- /drop down main menu -->

Then in your css in the header menu class remove the vertical-align:bottom;

Ruth

[liz]

thanks so much ruth! taking the css out worked! i also noticed however that what worked best was to put all the js links in the table instead of immediately after the <body> tag. hopefully this won't interfere with other javascripts i still need to insert.

also i think it might be helpful to endusers if you let them know that the load=true tag for mozilla won't work if they are embedding the menu in a table. i had no idea after researching those files.

thanks again for your kindness, wisdom, and expertise.