Problems with Submenus on horizontal menu placed in table

Poster: JB car pages
Dated: Tuesday March 6 2007 - 19:33:43 GMT

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://www.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: http://www.milonic.com/forum/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.

Poster: JB car pages
Dated: Tuesday March 6 2007 - 21:31:14 GMT

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();

Poster: Ruth
Dated: Wednesday March 7 2007 - 3:40:12 GMT

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

Ruth

Poster: JB car pages
Dated: Wednesday March 7 2007 - 15:32:51 GMT

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.

Poster: Ruth
Dated: Thursday March 8 2007 - 3:47:14 GMT

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

Poster: JB car pages
Dated: Thursday March 8 2007 - 11:57:28 GMT

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.

Poster: Ruth
Dated: Thursday March 8 2007 - 17:41:32 GMT

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

Poster: akfgfan
Dated: Tuesday March 27 2007 - 4:35:32 BST



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/

Poster: Ruth
Dated: Wednesday March 28 2007 - 4:33:23 BST

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

Poster: akfgfan
Dated: Wednesday March 28 2007 - 6:57:30 BST

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*




*Menu Code*

[/code]

Poster: Ruth
Dated: Thursday March 29 2007 - 1:01:14 BST

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

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

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


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



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



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



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

Poster: akfgfan
Dated: Thursday March 29 2007 - 6:48:00 BST

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:




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

Poster: Ruth
Dated: Thursday March 29 2007 - 8:03:23 BST

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

Poster: akfgfan
Dated: Thursday March 29 2007 - 22:45:50 BST

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*



*embedded_main_menu.js*




*sub_data.js*

Poster: Ruth
Dated: Friday March 30 2007 - 5:23:32 BST

Hi,

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



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


and your call for the subs_data.js file

Ruth

Poster: akfgfan
Dated: Saturday March 31 2007 - 4:40:03 BST

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.

problem with submenu in horizontal menu in internet explorer

Poster: liz
Dated: Saturday March 31 2007 - 8:55:37 BST

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://www.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://www.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.

Poster: Ruth
Dated: Saturday March 31 2007 - 21:08:36 BST

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



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.



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

Ruth

Poster: liz
Dated: Wednesday April 4 2007 - 0:22:35 BST

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.