Menu Item Missing Border

[jswidorski]

http://cds-shelby.johnswidorski.com

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=Home;url=default.asp");
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=About Us;url=about.asp;");
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=In-Store <br />Services;url=services_instore.asp;showmenu=InStoreServices;");
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=On-Site <br />Services;url=services_onsite.asp;showmenu=OnSiteServices;");
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=Products;url=product.asp;showmenu=Products;");
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=Web Design;url=webdesign.asp;");
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=Computer <br />Configurator;url=configurator.asp;");
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=Classes;url=classes.asp;");
aI("bgimage=/images/xp_button_green.png;overbgimage=/images/xp_button_green_on.png;text=Site Map;url=sitemap.asp;");
}

Code: Select all

with(menuStyle=new mm_style()){
bgimage="/images/xp_button_green_on.png";
borderstyle="solid";
fontfamily="Arial, Verdana, Helvetica, Sans-Serif";	// Font Information
fontsize="100%";
fontweight="bold";
padding=10;									// Cell Padding
separatorcolor="#999999";						// Separator Color/Size
separatorsize=0;
subimage="/images/arrow-down.gif";			//Arrow Image
subimagepadding=2;
}

What am I missing???
On my menu, it looks like my last menu item (Site Map) isn't surrounded by a border. The graphic is a standard Milonic graphic made larger and it too contains a border.

Thanks, John

[Ruth]

Hi,

The image is being used as a bgimage so it will only show the size of the item. It won't 'shrink' to fit and show the borders all around. So, try the below images, which are the ones you have with the border removed and then add this to your menuStyle.

Code: Select all

offborder="1px solid #336633";
onborder="2px solid #499702";

This will put borders around the items based on the item width rather than having it on the image. I changed the border color and size for onborder so it would stand out when you moused on the item so that you could see the change. If you don't want that, just make the onborder the same size and color as the off border.



Ruth

[jswidorski]

Thank you very much. The Menu is AWESOME.

Gonna be using this on all my sites in the future.

Thanks...

[ic31420]

Hi I am having a similar problem


I have recently upgraded the cersion of menu i am using.,,, from 5.772 to the latest version.


No the exterior border around the whole drop don menu is missing....

I am running version 5.772 on this dormant site...

http://www.tugtracker.co.uk

and the border is present.....





When i use the latest version and don't change anything in the menu_data file i get this....

http://www.locodocs.co.uk




I haev tried adding the code suggested above but it only borders each item on the "ladder" rather then the ladder itsself.

see



Any offers on how i can get the original styling back?

Tom

[Ruth]

Hi,

You are not placing the menu correctly since you are putting it in a div. And, it seems there is a border problem when using buildAfterLoad even when the menu is placed correctly. To fix the issue, first put the menu in the div correctly by removing the main menu from the data file, put it in its own file with a drawmenus at the end, save it as main_embed.js or whatever you want to name it. You now have two files, one with the main menu and a drawMenus(); at the end, and one with the subs and all the other data and also a drawMenus(); at the end. In the subs file, remove the build after load statement. In the main file remove all the position, i.e. top and left and add position="relative";

Call the milonic_src, mmenudom and the subs file right after the body tag. Then in the navigation div call the main_embed.js file. Your border will now work. Also, since it is now positioned correctly you shouldn't have problems in supported browsers. The below example shows both methods for putting the menu in a table/div i.e. relatively positioned. I will report the border issue with the buildAfterLoad=true; but in the meantime positioning it by method two fixes that problem.

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

Ruth

[ic31420]

Thanks as ever for your prompt reply


Im still getting to grips with this stuff!



Work is in progress with your suggestions.... Inital attempts have failed... to get the menu to appear on the pages.... but i have been awake for almost 20 hours so ive probably made a booboo somewhere obvious!

Ill have a sleep an another crack at it tomorrow..... Work in-progress is here http://www.locodocs.co.uk/menu/31403b.htm - it throws up some errors in the js on IE.


anyways....sleep!

Thanks again - im sure you'll hear from me again should i fail!


P.S. why does it still work fine with the older versions of the menu?

[Ruth]

Hi,

I think it's something wrong in the call for the files on the page. It acts as if the call for the files has line breaks in it.

Try copy and pasting this on the page, since you seem to be supporting NN4, and see if that fixes it. When I downloaded the page and then put the code as below the menu showed up with no problem.

Code: Select all

<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>

Ruth

EDIT: the same problem occurs in FF

You also have some css issues. You have extra } in the web css file and in the main.css file there are problems with /* either having two opening ones and one closing one or having opening ones and no closing ones. If you use FF error console it will actually point them out to you when you click the link to the 'error'

[ic31420]

Thanks once again...

I didnt mean for you to go back and have another look/do it for me step by step fashion, i replied to let you know i wasnt ignoring you/your advice if you or indeed others were to look back on the site/at the links posted!

Never the less i am very greatful

In the limited time available to me duing a break at work i have deleted the errent } from web-t.css

And tried your suggested code which seems to work for me.... in IE and FF

http://www.locodocs.co.uk/menu/31403c.htm

the errors in the main.css file are a little more of a problem to resolve as that css file is auto-generated by the program i use to make what is actually a gallery type of thing for the images. ( http://www.ornj.net/ )

I will let the guy who makes it know....


And have a further refine at home later...

Thanks again

[Ruth]

Hi,

Oh, I know you didn't mean for us to do it, but I like figuring out issues, it helps me keep on top of things

It also works in NN 7 and 9.

Ruth

[ic31420]

Well it is much appriciated anyway!

I think i have got it all working now - there was a slight hicup in Firefox with the menu following the curser down the page as one scrolled down one of the the longer pages i.e. http://www.locodocs.co.uk/manmanuals/ultrasonicdmu.htm , but i have fixed/bodged that by changing the positioning to absolute in the CSS file/

I did the css file ages ago when i had very little notion of what a css file was - im a little better now and the site is starting to look presentable.

keeps me off the streets at night


Thanks for your kind support.

PS i also bodged the sitemap thing to account for the new way of structuring the menu data over two files aswell... seems to work - for me at least!