Problem with overflow="scroll" and submenus...

rjmorton · Post by **rjmorton** » Mon Aug 04, 2003 6:21 pm

Hi,
First off - great new version of the menu! I've been using v3 until now and the newer version is MUCH better.

I have found a display problem with using scrollable submenus in horizontal format.
If the menus have scrollable sub menus, then the submenu always appears slightly below the parent menu item. This means that say my last menu item in the parent menu has a submenu, then the submenu is tiny as the submenu needs to fit slightly below the parent item and above the bottom of the browser window. If the scrollable property is not set, then of course the sub menu starts further up, so the entire submenu fits on screen.

I've probably not described this very well, let me know if you need to see what I mean in action!

Richard.

Post by **John** » Mon Aug 04, 2003 10:07 pm

Don't know about the other folks, but I sure need to see it. Tip - always post a URL so we can see what's going on.

rjmorton · Post by **rjmorton** » Tue Aug 05, 2003 5:39 pm

Sorry - I should have posted a link in the first place.

http://www.4imprint.com/_DEV/RJMORTON/N ... efault.asp

This is my test evaluation page. If you first make sure that you browser window is only a few inches high (so it scrolls), select 'products' and then scroll down to 'Writing'. When the sub menu pops out, it is tiny, even though it contains 4 items. Is there any way to make it automatically start higher up, so the bottom of the sub menu is parellel with the 'Writing' entries? I know I can make the submenu non scrolling, but there's a real reason why I want to keep it scrolling turned on for all of the submenus, even if it is not needed.

Hope that clears it up some!
Thanks,
Richard.

Post by **John** » Tue Aug 05, 2003 6:24 pm

OK, now I see what you're talking about.

Unfortunately I don't have an answer. This is going to be an Andy question. Sorry.

Post by **Andy** » Tue Aug 05, 2003 7:14 pm

Bit of collision detection work needed me thinks

We left this till the last minute cuz we weren't too sure the best way of doing it but now it's clear that the only way will be to use the whole of the page to show the sub menus.

At the moment they will add the scroll bars if they need to and they are working correctly with the writing menu. But, as the "writing" menu hasn't pushed the sub up at all it looks odd and is something that we will look at for RC 5.

Cheers
Andy

Maz · Post by **Maz** » Tue Aug 05, 2003 10:21 pm

Excuse me tailgaiting here, but I found a ray of light!

with(milonic=new menuname("mainmenu")){_c=1
top = 65;
left = 85;
borderwidth = 0;
style = mainStyle;
alwaysvisible = 1;
orientation="horizontal"

Thanks for keeping the source code intact there so I can view it, this is the part that effects the horizontal menu, and since this menu is positioned down the page, which none of mine will do, I tried eliminating code as in this example and I got some movement from the menu from sitting at the top of the page. But it wasn't very accurate movement, so I played with it until I lost sight of the menu again.

This is going to take me a while to go through each code until I find the codes that work, I started with taking out all null values and slashes.

This being an old Mac with IE, any suggestions/clues as to which codes may be the problem ones and are the original //slashes necessary as I see there are none in this example?

The position I'm trying to reach is top-px, center, width 100%.

Thank you so much
maz

Addendum:

Centered: I get 50px left & 30px right.
Black border: Is short, does not go to bottom of blue top menu.
Top px: Does not move from 18px.

I just removed relative position: the menu corrected itself, but now I have that extra blue 12px underneath the top menu (I showed an example before) its not going away with refresh.

I'll be back to add more if I get any further.
...............................................................

Here it is:

with(mainStyle=new mm_style()){
onbgcolor = "#6699cc";
oncolor = "#00ffff";
offbgcolor = "#3366cc";
offcolor = "#ffff66";
bordercolor = "black";
borderstyle = "solid";
separatorcolor = "black";
separatorsize = 1;
padding = 4;
fontsize = "75%";
fontstyle = "normal";
fontweight = "normal";
fontfamily = "verdana, tahoma, arial";
topbarimage = "images/arrow_down.gif";
topbarimageloc = "center;middle";
subimage = "images/arrow.gif";
subimageloc = "center;middle";
}

with(milonic=new menuname("mainmenu2")){_c=1
top = "55";
itemwidth= "100%";
menuwidth= "100%";
borderwidth = 1;
screenposition = "center";
alignment = "center";
style = mainStyle;
alwaysvisible = 1;
orientation= "horizontal";
keepalive = 1;
aI("text=Milonic Home Page;url=http://milonic.com/");
aI("text=Support;showmenu=support menu");
aI("text=Local Samples;showmenu=LOCALSAMPLES");
aI("text=Online Samples;showmenu=onlinesamples");
aI("text=Long Menu;showmenu=long menu");
}

This works except for border, when I take all the borders off it works perfectly, but when the borders are on as in this example, then the border behind the blue starts out at 3/4 height rolling up to 1/4 height, with the top of the border staying in place, so the border kind of scrolls itself up to the top behind the blue main menu as its loading.
Oh, the 100% horizontal is about 99% but that doesn't bother me.

I didn't change the rest of the menu except for removing itemwidth and borders to make sure they were not causing problems.

rjmorton · Post by **rjmorton** » Wed Aug 06, 2003 11:31 am

Great Andy/Everyone - thanks for the fast response and keep up the good work!

Maz · Post by **Maz** » Wed Aug 06, 2003 5:18 pm

I should add, that its not advisable to center a long horizontal menu, because if the browser/screen it too small its going to flow off the left of the page without being able to scroll left. For a long menu it would have to be positioned left a few pixels possibly 99%/100% width for a centered look. If the text is more than one word then the menu will adjust creating more lines in height such as:

.............
Milonic
Home
Page
..............

To include 'left px's' it over-rides center, unless center could have a 'fixed left value' that would prevent it from going off left. My guess is that center is too fluid to control in this manner.
maz

Maz · Post by **Maz** » Mon Aug 11, 2003 5:25 pm

maz wrote: when I take all the borders off it works perfectly, but when the borders are on as in this example, then the border behind the blue starts out at 3/4 height rolling up to 1/4 height, with the top of the border staying in place, so the border kind of scrolls itself up to the top behind the blue main menu as its loading.

Unable to resolve this border rolling up, I am now using xpmenu with no problem. I hope this helps to catch the border problem in the horizontal menu.

Great people
Thanks
maz

Post by **Andy** » Mon Aug 11, 2003 5:29 pm

Have you got a demo of this that we can see?

I had trouble reproducing the problem here.

Cheers
Andy

Maz · Post by **Maz** » Tue Aug 12, 2003 4:17 am

Sorry I don't have anything to show right now. Remember maz=mac OS8.6 I know you advice 9.0.

The bottom border is hidden behind the horizontal menu on your test menu and others who posted the horizontal menu. I've noticed they are all different, 10%, 45%, 75% of the height of the menu. Can only see the top and side % but the bottom of the border is always covered up by the menu bgcolor. Border works fine in xpmenu.

I had xpmenu nicely centered 100/99% horizontal, borders correct, I centered followed by left=0 command and it worked.

Today I added a vertical xpmenu to the same page below the horizontal menu, and the horizontal menu started growing wider than the page during loading and had extra white space to the right of the menu.

I tried every method possible of get the horizontal xpmenu to fit 100/99% with the second menu. But it always grows larger and even with left=1 & right=1 there are approx. 15 px extra white space to the right after the extended menu.

I have 6 items with margin=3 for the xpmenu sub-menu, I'm wondering if the IE 5.1 browser is including these pixels at the end of the menu. Everything else appears to work, although I'm not sure why I don't see lines between vertical submenu names.

nb. I changed separatorwidth=1 to avoid % interference.

Now I have 2 puzzles:

-Floating vertical menu background extends to the end of the page even with itemheight=20;

-Horizontal menu won't extend 100%;

These menus are doing the opposite of what I'm trying to do.

I made horizontal left=1, first itemwidth=102 to match vertical itemwidth=100 + border=1. I would like the other horizontal items to extend to the end of the page, for an abbreviated example, is it possible to do something like this: itemwidth=100%-102;?

In other words the menu's are the opposite of what I'm trying to achieve, vertical is 100% and horizontal is not, I want horizontal 100% and vertical not.

Even though you don't support below OS.9.0 I hope if there is something lurking you might catch it before it surfaces

Happy launching

maz

Maz · Post by **Maz** » Tue Aug 12, 2003 6:39 am

Time lapse on loading Milonic site menu v5.5.

This border problem only occurs in horizontal menu.

I'll point out this white line at the end of this menu:

Other viewing problems disappeared in v5.5.

Now I'm sure I have v5.5 and will see if other problems still exist.

Hope this helps
maz

Post by **John** » Tue Aug 12, 2003 3:15 pm

You will want to re-post your last message. I assume you were trying to post screen shots, which, for some reason, we cannot see.

Hergio · Post by **Hergio** » Tue Aug 12, 2003 3:20 pm

Hey John, see if you get why this is happenin. I look at the properties for those images that were posted up and the URL looks fine...so I copy it and paste it into my browser and navigate to the file and it displays fine. I hit my back button on my browser and there is the image in the post, displayed correctly. The others dont show yet. But when I get their URLs, paste them into my addr bar, view them on their original server and then click back to the forum post, there they are! Weird.

Post by **John** » Tue Aug 12, 2003 3:24 pm

I did exactly the same thing, Dave, with the same results (only tried the first one). It didn't show up until I left this group and then came back in, however. Definitely goofy.

Guess my next question is, if maz has gifs up there why not put a test page up so we can see what's happening?

Addendum: after I posted this message and went back to the Forum the first graphic was gone again

Addendum 2: Now I'm not seeing any Avatars. Got a server problem, boss

Maz · Post by **Maz** » Tue Aug 12, 2003 4:29 pm

Don't know why its doing that, I see the images okay, I had trouble getting into the forum, some configure menu problems. Come back later. Weird.

I'll post them as urls without Img code tags.

http://www.geocities.com/maz_arti/milonica.gif
http://www.geocities.com/maz_arti/milonicb.gif
http://www.geocities.com/maz_arti/milonicc.gif

These are shots of the milonic menu page as I see them.
First 2 are the rising border
3rd is the white space at the end of menu.

Can anyone answer this question: If I have a horizontal menu with first item 102px how can I get 100% minus 102px? eg: itemwidth=100%-102 ?

Thank you
maz

Maz · Post by **Maz** » Tue Aug 12, 2003 8:32 pm

Last run xpmenu v5.4 submenu position was right on, that's a first for me.
1. Now v5.5 tags:

Code: Select all

_subOffsetTop=1  _subOffsetLeft=1

Do nothing, I noticed this as soon as I put my code into the newer version.

I'm setting them individually (horizontal):

Code: Select all

	top="offset=-5";left="offset=11";

2. When I turn on followscroll the last item bgcolor extends to the bottom of the page. That's with itemheight on all lines. (vertical)

Can I trade this powermac 4400/200 :mrgreen:

Hope this helps.
maz

Maz · Post by **Maz** » Wed Aug 13, 2003 7:15 pm

I found some minor problems here:
http://developer.apple.com/internet/css/ie5cssbugs.html

a. 15px overflow @ right margin.
b. scroll overflow where last item color extends (often see menus with the whole page covered by the bgcolor and the submenu at opposite side of page).
c. remove all slashes.

I'm going to try this as a possible solution:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">

I don't think this accounts for _offset not working this time around, because it worked last time. And horizontal menu border snap shots?

Hope this helps to explain some of the problems I've had.
maz