IE 5.5 Problem w/ Follow Scrolling 1, Always Visible 1

Poster: Battleboro
Dated: Saturday May 3 2003 - 4:34:15 BST

IE 5.5 - When using a horizontal menu with Follow Scrolling set to 1 and Always Visible set to 1, I get a 1 pixel "border" at the top of the menu after scrolling the page down, then back to the top.

Netscape 7.0 - No problems.
Netscape 4.76 - No problems, but page isn't formating correctly. I was only testing for the "border" and not the appearence.

Also, in trying to eliminate the "border" I set Always Visible to 0. This caused the menu to stop Follow Scrolling. Is this a bug?

I haven't finished the page/site, just trying to get the menu looking good first.

Can anyone help me? Thanks.

http://www.fbcindep.org/body1.htm
http://www.fbcindep.org/menu/menu2_array.js

Poster: John
Dated: Monday May 5 2003 - 17:25:33 BST

Looking at your page in IE6/XP I don't see any of the problems you mention - no 'border' and it scrolls fine.

Poster: kevin3442
Dated: Wednesday May 7 2003 - 0:04:40 BST

Hi,

The FollowScrolling property is not a boolean, as many think. The value you set essentially tells the menu where to start scrolling; e.g., start scrolling when the top of the menu is within FollowScrolling pixels from the top of the window. The lowest value you can set is 1 (0 turns the effect off). So, if you set FollowScrolling to 1, there will always be at least one pixel between the top of the menu and the top of the window, once scrolling has begun, regardless of what browser you are using (I've looked at this on many different browsers). The gap may be nonexistent before scrolling begins, if the menu is placed at the very top. the gap may be larger, if MenuTop is greater than 1.

I just visited the url you provided, but no menu appeared (the page is currently not loading the menu scripts). Adjusting followrate and followspeed will not affect the gap. followrate is how many milliseconds there are between successive movements of the menu (1000 milliseconds in a second). followspeed is the how many pixels the menu "jumps" during each movement.

Hope that helps,

Kevin

Poster: Battleboro
Dated: Monday May 12 2003 - 16:17:50 BST

Kevin,
Thanks for your reply and it did help. I'm just going to code for IE 6. In case anyone didn't notice, IE 6 supports the Shadow parameter, unlike IE 5.5.



Regarding your quote, would you consider this a bug? If so, I won't spend any more time trying to eliminate the "offset" after scrolling then returning to the top of the page.

Sorry for the URL not working, I've been working with our host to get Server Side Includes operational. If you don't mind, please try the URL listed below to see my menu. A picture is worth a thousand words. Before scrolling you should notice that the menu titles are perfectly centered. After scrolling far enough to make the menu move, the menu titles are no longer centered and move closer to the bottom. After returning to the very top of the page, you'll notice the menu realign after refreshing the page. All of this sounds like what you were trying to tell me in your quote above.

http://www.fbcindep.org/redesign/body.shtml
http://www.fbcindep.org/menu/menu_array.js

Thanks...

Poster: kevin3442
Dated: Tuesday May 13 2003 - 1:19:21 BST

Hi,

The way I've described FollowScrolling is actually how it works by design. This value started out as a boolean, to turn the scrolling effect on or off. It was coopted at a later date so that you could actually specify where scrolling should begin. The 1-pixel gap at the top, which others have occasionally noticed as well, seems to be a side effect that is unfortunate for some.

You have a very interesting puzzle (to me anyway). I see what you've done to eliminate the 1-pixel gap after scrolling; you've set the 15th element of the "FollowMain" menu array to a value greater than zero. That's clever... never tried that to get rid of the 1px "after scrolling" gap. It makes sense that this approach would work to get rid of the gap, however, because it essentially adds a sort of padding around your menu. In the 15th element, any value greater than 1 causes a "background bar" (for lack of a better term) to appear behind the menu. This "background bar" uses the "Mouse Off Background Color" from the menu's style array and expands the full horizontal extent of the window. In my experience, this bacckground bar also expands X pixels above and below the menu (where X is the value you set in the menu array's 15th element). The added vertical background color is why people usually turn off the menu border or the shadow effect when using this option (which I notice you have also done). Most people who use this option set it to 1, simply to achive a full-extent background bar. You've set yours to 3, which adds more pixels above and below the menu. And this actually turns out to be the root of your other problem; menu items that are not vertically centered after scrolling begins. I've had a look, and what happens when you use the 15th element in conjunction with the FollowScrolling property (the 11th element) is that as soon as you scroll the page, the background bar shifts upward, so that you now have 2X pixels of background above the menu, and none below it (i.e., the bottom edge of the menu and the bottom edge of the background bar are now at exactly the same vertical position). Stated another way, think of the menu and the background bar as two separate entities (they seem to be just that). Initially, the meu is vertically centered within the background bar. But as soon as you scroll that page, the menu the background bar shifts relative to the menu, so that the menu is now bottom-justified within the background bar. So, although your text is in fact still vertically centered within the menu, it is no longed vertically centered within the whole construct; it appears to have shifted lower.

I hope that made sense. If you want to see for yourself, try setting the 15th element of the array to a larger number, like 10. Then specify an alternative background color for your first menu item, using offbackcolor, like so:

With the new background color, you should be able to see the position of the menu within the background bar; watch what happens when you scroll.

I would guess that this particular behavior probably is a bug. I have no idea why the background bar suddently shifts (and remains that way even when you scroll back to the top). What can you do? I have two suggestions: (1) Use 1 instead of 3 in the 15th element. That should still plug up the 1px gap at the top after scrolling begins. You'll still get the text shift effect, but the shift will only be one pixel, which most people won't even notice. (2) You could create a scrolling menu that incorporates your logo at the top, so that the logo scrolls along with the menu.

I'd also humbly suggest setting followrate and followspeed back to their default values, or at least increasing them, so that the menu movement appears smoother; it looks a little jumpy to me right now.

Hope that helps,

Kevin

Poster: Battleboro
Dated: Friday May 16 2003 - 19:33:29 BST

Kevin,
Wow! Thanks for taking the time to explain all that you did. Everything made perfect sense.



Funny you should mention this. A logo that follows the menu was my original design. After showing this to a buddy of mine, who is a professional web developer, he didn't like it and gave a few reasons of why it should be removed. Reluctantly, I removed the logo. The look of a non-following logo never appealed to me, but figured it was in good design considering my buddy's "expert" opinion.

His primary reason for not liking the "following" logo was due to the popularity of 800x600 resolution (http://www.thecounter.com/stats/2003/May/res.php). A tall menu coupled with a 800x600 resolution wouldn't leave much room for the page content.

I'm glad to see your "following" logo suggestion. I agree and will most likely return to that format. Kind of like not going with your first answer on a test. Check it out: http://www.fbcindep.org/redesign/bodyheader.shtml. Of course, the 1px "scrolling gap" still causes a little imperfection, but all in all I think it looks pretty good. (The logo will overlap the menu when scrolling up. The alignment is corrected when scrolling down. I just chalk it up to the 1px "scrolling gap" and will live with it.)

Speaking of our little 1px "scrolling gap" friend. I've made another discovery/refinement. By using a 1 in the 15th element (overall width) and a 1 in the 5th element (menu border width), the vertical alignment remains intact (or at least is simulated).

I also took your suggestion of going back to the default followrate and followspeed.

At first, I was using two separate menus, to get the menu below my logo, because the menu items were appearing beside my logo header. Then it occurred to me to make the "menu" a sub-menu of the logo. Partly because the 1px scrolling gap was driving me crazy and figured a sub-menu would follow perfectly.
http://www.fbcindep.org/redesign/bodyheader.shtml
http://www.fbcindep.org/menu/menuheader_array.js

Non-following logo design.
http://www.fbcindep.org/redesign/body.shtml
http://www.fbcindep.org/menu/menu_array.js

Thanks for all your help... Brent

Another option

Poster: gpclark
Dated: Monday May 19 2003 - 22:48:26 BST

Another option I have used is to "launch" 2 menus at once. The first is a background menu with a background color style of "white" and padding of 2 or 3 (as you refer to in other replies in this thread). Then following this addmenu() call add your main addmenu() which lays out the real menu.

In fact, we need 3 menus vs 2 due to the company logo and submenu interaction. The first menu handles this 1 pixel bug (and yes it is a bug ), the second menu handles the graphic logo image, and the third is the actual menu with submenu options showing up without any gaps. It works great.