submenu border problems

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:15

submenu border problems

Poster: gsam
Dated: Thursday October 23 2008 - 3:14:06 BST

I'm having problems getting the basic border to work on my submenus.
I use images for the main menu so I don't want any borders on it.
I also set the main menu position to relative so it will display in a table.
the submenus use divides so they are displayed as muilt-column.

I've tried every combination I can think of and simply cannot get the menu border to show up?
Any suggestions?

Code:

with(menuStyle=new mm_style()){
//bordercolor="#296488";
//borderstyle="solid";
//borderwidth=1;
//margin=4; 
}

with(submenuStyle=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
offborder="1px solid #3399CC";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#99CCFF";
offcolor="#000000";
onbgcolor="#4F8EB6";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Shadow(color=#777777', Direction=135, Strength=5)"; //Alpha(opacity=90);
padding=5;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
style=menuStyle;
position="relative";
aI("showmenu=NFL;image=graphics/00000001/cattree/left_nav_nfl.png;");
aI("showmenu=NBA;image=graphics/00000001/cattree/left_nav_nba.png;");
}

with(milonic=new menuname("NFL")){
style=submenuStyle;
divides=3;
aI("align=center;text=Detroit Lions;url=/page/D3/CTGY/Detroit_Lions;");
aI("align=center;text=Buffalo Bills;url=/page/D3/CTGY/Buffalo_Bills;");
}

Re: submenu border problems

Poster: Ruth
Dated: Thursday October 23 2008 - 7:54:43 BST

Hi,

I just used your submenuStyle in the menu_data.js file that comes in the download and set the Milonic submenu to divides=3; and the main to position='relative'; and I am seeing the border. You'll have to give me a page with your menu on it and your css so I can see what you see.

Ruth

Re: submenu border problems

Poster: tirussell
Dated: Thursday December 18 2008 - 20:26:19 GMT

I am having a similar problem using a list-based menu with submenus - they all have the same style and they all have their class declared, but the submenus do not show the same border as the main menu.

http://www.trinitydc.edu/newadmissions/myprogram.html

(left side menu)

Any help much appreciated.

Re: submenu border problems

Poster: Ruth
Dated: Friday December 19 2008 - 0:32:23 GMT

Hi,

I'm not sure what is going on and I will report it. However, you can fix it by setting the menuStyle as below

Code:

with(menuStyle=new mm_style()){
offborder="1px solid #c7bdd0";
onborder="1px solid #c7bdd0";
separatorcolor="#c7bdd0";
separatorsize=0;
bordercolor="#c7bdd0";
borderstyle="solid";
borderwidth=0;
fontfamily="Arial, Verdana, Helvetica, Sans-serif";
fontsize="11px";
fontstyle="normal";
offbgcolor="#fef9e5";
offcolor="#d15721";
onbgcolor="#fce9ab";
oncolor="#4d3069";
padding="6px";
itemwidth=171;
}

As you can see I've added offborder and onborder, and changed the borderwidth and separatorsize to 0. You can still leave the borderwidth as 1 if you want, it just makes the border that is around the outside of the whole menu look darker. Offborder and onborder place a border around each item giving the same look as if you had the menu border and separators.

Ruth

Re: submenu border problems

Poster: tirussell
Dated: Monday December 29 2008 - 17:08:29 GMT

Hi Ruth -

Thanks for the help. I'm not wild about the on/off item borders since it doubles the width between items - great idea though.

I wonder why the borders don't show on the submenu. Oh well.

Re: submenu border problems

Poster: Ruth
Dated: Monday December 29 2008 - 23:14:03 GMT

Hi,

Well, I'm still trying to figure it out. But, I have another idea you might try, just to see if you like it. Add this style below the existing one you have on the page

Code:

with(menuStyle1=new mm_style()){
offborder="1px solid #c7bdd0";
onborder="1px solid #c7bdd0";
separatorcolor="#fef9e5";
separatorsize=1;
fontfamily="Arial, Verdana, Helvetica, Sans-serif";
fontsize="11px";
fontstyle="normal";
offbgcolor="#fef9e5";
offcolor="#d15721";
onbgcolor="#fce9ab";
oncolor="#4d3069";
padding="6px";
itemwidth=171;
}

Now, pick one of the submenus and make it menuStyle1 instead of menuStyle. See if you like the way that looks. Then you can change the menuStyle back the way it was using the border and separator and getting rid of on and offborder so you don't have that thicker border look in the main menu. You can even get the items to be farther apart in the submenu by making the separatorsize bigger in that menuStyle1. Just a thought.

I think it may be something in the css so I'm working on it. Have a great New Year

Ruth

Re: submenu border problems

Poster: redtopia
Dated: Monday February 9 2009 - 19:17:20 GMT

I'm having the same problem... submenu borders are not displaying. It must be related to "buildAfterLoad=true" which I needed to turn on in order for submenus to be displayed in IE. When I turn that off, borders appear in mozilla, but submenus don't appear in IE. I can add the onborder and offborder styles, but that creates the double line in between menu items, which i don't want. Is there a fix?

Thanks!
-JP

Re: submenu border problems

Poster: Ruth
Dated: Tuesday February 10 2009 - 2:36:29 GMT

Hi,

I need the page to be able to work on it. I wasn't able to get a solution to the other, except for the option I posted. But, if you let me have your page perhaps I can figure it out.

Ruth

Re: submenu border problems

Poster: redtopia
Dated: Wednesday February 18 2009 - 17:13:52 GMT

http://www.tetonscience.org/index.cfm?id=journeys_home

Thanks!

Re: submenu border problems

Poster: Ruth
Dated: Wednesday February 25 2009 - 4:08:12 GMT

Hi,

OK, here is the solution. If you add a drawMenus(); to the end of the subs data file and remove the buildAfterLoad=true; then the submenus show in IE, and the border works fine

Using the method you have for placing the menu relatively, it is usual to add a drawMenus(); to each file rather than to a script tag on the page. What's happening it seems, is that with it on the page and not in the subs file, IE is reading it but only applying it to the main menu. You can leave it, not add one to the main data file but add it to the subs and that fixes it. Not sure if you have to have it on the page for some reason.

Also, note you need to upgrade to 5.816

Ruth

Re: submenu border problems

Poster: redtopia
Dated: Thursday February 26 2009 - 22:28:36 GMT

What exactly does the buildAfterLoad option do and why would one use it?

Re: submenu border problems

Poster: Ruth
Dated: Thursday February 26 2009 - 22:45:02 GMT

Hi,

Well, as you know the way to place a relatively positioned menu was always to created two files, one with the main menu which was put into the table cell or div and marked as position="relative"; and then everything else in a subs file. Then that file was called 1st thing after the body tag along with the program files.

So, Andy worked out a way to be able to keep all the info in one file and just call all the files in the table cell or div, that was to use the buildAfterLoad=true; I think some people also use it to have the menu, even if not relatively positioned, not build until everything is loaded...

For the most part this works with no issues, but once in a while, for unknown reasons [reasons I can't find but are probably something to do with the page and something on the page, or the type of page], there are issues. The first thing I do when there is an issue involving buildAfterLoad and a relatively positioned menu is to set it up as the old method, with two files, removing the buildAfterLoad and see if the issue is resolved. In your case that resolved the issue. However, now that I think about it, I don't know if I tried putting all the files into the data file using buildAfterLoad=true; and the drawMenus(); at the end of the file and calling all the program and data files in the table/div. You can try that if you want and see if it works. Sorry, I didn't think to do that...duh

Ruth

Re: submenu border problems

Poster: redtopia
Dated: Thursday March 12 2009 - 16:44:55 GMT

Still not sure how to resolve the border/separator problems... seems to happen to all my menus after upgrading to the 5.813. Check out this site:

http://www.jhcenterforthearts.org

This site uses a .gif file to draw the separator, which no longer shows up. Also in IE (not in FF), the submenus draw below the table cell where the main menu resides. Hmmmmm. Any ideas?

Re: submenu border problems

Poster: Ruth
Dated: Thursday March 12 2009 - 17:55:40 GMT

Hi,

First, can you tell me exactly where you want the menu to appear? Never mind I found it.

Second, you need to upload the separator. When you go to the url for the separator you get 'page not found'

Ruth

Re: submenu border problems

Poster: Ruth
Dated: Thursday March 12 2009 - 18:12:31 GMT

Hi,

You are going to have to tell me where exactly you want the menu to appear. I found where you put the call, but I need to know just exactly what position in that you want. Do you want it in the absolute center of it, centered top to bottom?

Ruth

Re: submenu border problems

Poster: Ruth
Dated: Thursday March 12 2009 - 18:34:35 GMT

Hi,

Based on what I see when I go to the web page, try the following table setup to fix the problem

Code:

<table border="0" cellpadding="0" cellspacing="0" align="left" width="100%" style="height:100%">
<tr>
<td align="right" valign="middle" height="20"><span class="navHeaderHome">
<a href='index.cfm?id=visit'>Visit</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href='index.cfm?id=newsletter'>Newsletter</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href='https://boxoffice.jhcenterforthearts.org/2000/maxshop.exe?store=cfa' title='Purchase Theater Tickets'>Box Office</a>
&nbsp;&nbsp;|&nbsp;&nbsp;<a href='index.cfm?id=blog'>Blog</a>&nbsp;&nbsp;</span></td>
</tr>
<tr>
 <td height='72'>
<IMG height=60 alt="" src="spacer.gif" width=1 border=0></td></tr>
<tr><td valign='top'><script language="javascript">drawMenus();</script></td></tr></table>

Also, you need to upgrade, we've got 5.818 now, 5 more versions

Ruth

Re: submenu border problems

Poster: redtopia
Dated: Thursday March 12 2009 - 22:38:08 GMT

OK, you're right about the separator... my mistake. That was the incorrect path to the image.

I''m not sure what you're fix is actually fixing. It looks like you're pushing the main menu to the bottom of the header image. The main menuy is being drawn correctly... vertically centered in the header image. What's happening in IE (not in FF) is that the sub menus are being drawn below the header image, and are detached from the main menu. I'm using IE 7.

Re: submenu border problems

Poster: Ruth
Dated: Friday March 13 2009 - 1:11:14 GMT

No, actually I just set the position of the menu in the middle.

I tried everything I could, and finally when I removed the 100% for that table height the menus opened correctly. But, if you remove that, then the menu ends up at the top of the header. So, I added an empty table row set to 60px height which combined with your height of 20 for the links at the top, placed the menu someplace around 80-90px down in the table cell which is set to valign='top'; and the submenus open where they should.

I have no idea why the submenus were opening way down at the bottom, I can only think it had to do with the style="height:100%"; somehow being read by the menu and 'believing' the menu itself is 100% high and opening the submenus at the bottom of that. Again, that's a guess, I don't know the programming, I just figure ways to make things work correctly. Also, before you try thing, you might try updating the menu and using it in your original layout before you make any changes and see if that fixes it first.

Ruth