views:

503

answers:

3

I'm maintaining a web page and need to fix a very weird behavior under IE. The page has a table that displays a menu for each cell as the mouse moves over. Everything runs fine as long as you have the browser window 800px height at least. If you browse this page with Chrome, Opera or Firefox and the browser's window height is smaller than 800px, some menus will overflow the window and the user must scroll down the page to display the options hidden. That's the expected behavior. But if you browse the page using IE, and after the menu is displayed and the user scrolled the page down to see the hidden options, any mouse movement will scroll the page back to the top of the page.

There is a mouseover event hooked to the submenu item, this event swaps a image displayed at the top of the page with another related to the submenu context. I though this image swap make this side effect, but replacing the function code with a "return true" don't change this behavior.

I'm running out of ideas, so any clue will be appreciated.

This is the URL (nice cars!): www.kaufmann.cl
Mouse over "Clase C", when viewed in a 800px the browser will show a vertical scrollbar. This is where the fun begins.

The "stackoverflow" parameter is to display a DIV that shows the events fired and it's order of execution.

EDIT: This problem happens in IE6 to IE8 (both in normal and compatibility mode)

A: 

It seems the browser reset the scrollbar to the position where the last object where mouseover'ed. When you place the mouse over one item and then scroll down, the item currently under the mouse arrow does not get applied the style for this item, but as soon as the mouse is moved 1 pixel in any direction, the scrollbar is reset so the mouse is placed again over the element highlighted before scrolling down. Anyone knows a way to bypass this stupid behavior?

Rodrigo
+1  A: 

Have you tried this?

<body style="height:1000px;" ...

While you didn't post the version of IE which was showing the problem, on my machine (IE8) giving the <BODY> a tall height clears up the scroll-back-to-top problem that happens when you scroll (with the keyboard) while the popup menus are displayed.

Justin Grant
Yes, and don't make any effect. You can see right now applied.
Rodrigo
hi Rodrigo - with the 1000px applied, I'm not able to repro a problem anymore. I'm trying to repro it as follows, let me know if this is the right sequence of steps: #2: resize IE8 to 1060px wide by 560 px high; #2: load your URL; #3: position the mouse over "Clase C" (don't click anything) and then mouse over the first submenu item in that section; #4: with down arrow on the keyboard, scroll down until the mouse is no longer over "clase C". What I see at this point is that the "Clase C" section collapses (as expected) but I don't see scrollbar reset to top of page. What am I doing wrong?
Justin Grant
Yeah, with your help I was able to workaround this. Thank you!
Rodrigo
Cool! Glad to be helpful.
Justin Grant
A: 

Try adding return false; to your onmouseover snippets, as follows:

<a onmouseover="MM_swapImage('cambio','', 
    '/publicador/site/artic/20090513/imag/FOTO_0520090513175050.jpg',
    '1'); return false;"></a>

(Other attributes and content were removed for brevity.)

gWiz