NEWBIE: Fat separator bars & odd behavior on first mouse

drhansenjr · Post by **drhansenjr** » Sun Feb 01, 2004 3:28 pm

I am working with Milonic Menus for the first time and am having some odd problems (see http://www.anacys.com/sa/ ).

Despite having separatorsize=1 my separator bars in vertical menus all come out 5px thick.

Also. when I first mouseover items in the main horizontal menu, the corresponding vertical menu appears at the far left margin -- but in the proper place on the second and subsequent mouseovers. I am using the default menu that came with my download with minimal tweaks.

I am also using it on a Xoops CMS/Portal site if that matters.

HELP!!

dh

drhansenjr · Post by **drhansenjr** » Sun Feb 01, 2004 11:41 pm

Here's a screenshot showing the problem (the vertical menu moves into the correct position under "the school" after the first mouseover).

fredlongworthhighschool · Mon Feb 02, 2004 10:15 am

Just had a look at your site and all seems to be ok, I'm assuming you got it fixed over the weekend?

drhansenjr · Post by **drhansenjr** » Mon Feb 02, 2004 1:38 pm

What you're seeing is Tigra Menus. I finally gave up and switched.

Post by **Ruth** » Mon Feb 02, 2004 6:17 pm

too bad, this is such a great menu, so designable to meet personal creative quirks...... and a lot of people would have been glad to help with whatever the problem might have been.

Ruth

drhansenjr · Post by **drhansenjr** » Mon Feb 02, 2004 7:31 pm

OK - I plugged Milonic back in -- anything jump out at you that I might be doing wrong?

Post by **Andy** » Mon Feb 02, 2004 8:17 pm

It's to do with your style sheet.

style.css has global parameters that are conflicting with the menu.

I'm looking into how we can stop this from happening.

The problem is related to the global TABLE and DIV styles.

Is this your style or the style built from Xoops?

Cheers
Andy

Post by **Andy** » Mon Feb 02, 2004 8:30 pm

Right, here's the score

Upgrading to RC49 will fix the separator problem. We've fixed padding to 0px, so shouldn't be a problem now.

Remove 100% from the TABLE reference in style.css - Unless of course you need this parameter and then you'll need to specify menu widths.

Change the menuwidth= declarations in your menu_data.js file to itemwidth=

Hopefully that should clear the main problems, then let us know what else needs looking at.

ALL of the problems are associated with CSS, most of the problems we can deal with but there may be some we have no control over.

Hope this helps
Andy

drhansenjr · Post by **drhansenjr** » Mon Feb 02, 2004 9:37 pm

Where do I go to get the RC49 upgrade?

Post by **Ruth** » Mon Feb 02, 2004 9:51 pm

drhansenjr, you go to the main page/home page, click the milonic icon at the top of this one, click get version 5 and go from there. It really is a great menu, I love it, was able to configure it with a little / lot/ of help because I wanted something so different, but boy you can make it do so many things, look so 'personal'. I love it.

Ruth

drhansenjr · Post by **drhansenjr** » Mon Feb 02, 2004 10:37 pm

OK... Upgrading to RC49 took care of the fat separators, but I still had the behavior where on the first mouseover the dropdown menu appears at the far left side of the page, but comes up in the right place in subsequent mouseovers.

I replaced all the "menuwidth"s with "itemwidth"s -- and now the menus span the entire width of the page!! What goeth on?

Post by **John** » Mon Feb 02, 2004 10:40 pm

Ruth is one of our folks who has done some really nifty stuff with her menu (that's not to say many other folks have not also!). Do take the time to check it out if you have not already done so.

drhansenjr · Post by **drhansenjr** » Mon Feb 02, 2004 10:44 pm

I take back my last post-- I forgot to zap the width:100% in my css. Doing that seems to have fixed my problem for now.

drhansenjr · Post by **drhansenjr** » Mon Feb 02, 2004 10:49 pm

OK -- almost there! Any idea why any item in my menu with a submenu seems to have the text dropped/padded down several pixels -- while items with no submenu do not?

Post by **Ruth** » Mon Feb 02, 2004 11:03 pm

Off the top of my head it has to do with the subimage. I've downloaded the menu and am checking for the specific problem, padding etc.

Ruth

Post by **John** » Mon Feb 02, 2004 11:15 pm

I'm doing the same as Ruth, but she has a head start on me!

Meanwhile, just to stay 'clean' (this isn't the cause of the problem), you have...

Code: Select all

aI("text=Home;itemwidth=75;url=/sa/;status=Back To Home Page;");

...in your main menu items, which is correct. However, you did not continue the format in your other menus...

Code: Select all

aI("text=Parish Administration;showmenu=ParishAdmin");

Note the missing ; after ParishAdmin. Should be...

Code: Select all

aI("text=Parish Administration;showmenu=ParishAdmin;");

...for all menu items.

Go fer it, Ruth!

Post by **Ruth** » Mon Feb 02, 2004 11:53 pm

The conflict is from the style.css file. This line

Code: Select all

TD {
	BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; VERTICAL-ALIGN: top
}

if you remove that VERTICAL-align:top the problem desists. I'm not sure there is a way to override it in the menu_data file. I tried subimageposition="right;middle"; but that didn't work. Also, the menuheight is being governed from the style.css the

Code: Select all

DIV {
	LINE-HEIGHT: 14px; MARGIN: 2px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}

The margin, padding are adding to the menu. I fixed that by removing the padding=1; from the top of the menu_data.js file and moving the margin=0; down to the menu itself.

Code: Select all

with(milonic=new menuname("Main Menu")){
margin="0";
style=menuStyle;
separatorsize="1";
top=100;
menualign="left";
alwaysvisible=1;
orientation="horizontal";
overflow="scroll";
aI("text=Home;itemwidth=75;url=/sa/;status=Back To Home Page;");
aI("text=The Parish;itemwidth=100;showmenu=Parish;");
aI("text=The School;itemwidth=100;showmenu=School;");
aI("text=For Current Students & Parents;itemwidth=250;showmenu=Students;");
}

I don't know what to do about the arrow...nothing I tried works except removing that Vertical-align: top; from the style.css file.

Ruth

drhansenjr · Post by **drhansenjr** » Tue Feb 03, 2004 1:24 am

Wow! Thanks for all the help, Ruth! Big improvement!

Just a few follow-ups:

1) How do I get my menu to move hard against the left margin of the page and get rid of that annoying little 2-3px gap at the left? Is this also a css issue?

2) Any idea why the arrow gifs are padded back a ways in the main menu and not in the others (I'd like them all the same).

3) Is there an easy way to add a "dummy" rectangle/item to the right of the last main menu item so it spans the page -- or do I need to code that into the page itself and position the menu on top of it?

Dan

drhansenjr · Post by **drhansenjr** » Tue Feb 03, 2004 3:02 am

Ok - I solved these myself -- except that I've lost the separator after the rightmost item. Adding menuwidth="100%"; an taking out overflow="scroll"; fixed 1 and 3, and I had a default css entry that added padding to all img tags -- zapping that got rid of #2.

Just one little nit left!!

Post by **Ruth** » Tue Feb 03, 2004 3:07 am

Ok, but one thing I noticed the arrows in the main horizontal menu point to the right instead of down. There is a down arrow someplace you could use, you would put that as the subimage in the main section where you have arrow now, then you will have to code each of the vertical menu items that has a showmenu with the following. For example:

Code: Select all

aI("text=Parish Administration;showmenu=ParishAdmin;subimage=arrow.gif;subimagepadding=2;");

or whatever padding you want. Then just make sure you have both the arrowdn.gif and arrow.gif uploaded so it shows.

Or you could find another image, like say a tiny star or something to indicate a submenu and just use that for all of the subimage

Ruth