Last post Aug 22, 2006 12:05 PM by Monkey@Keyboard
Aug 21, 2006 02:41 PM|Monkey@Keyboard|LINK
I am using the Horizontal Menu in a web application i have developed and i find it to be excellent.
However, one test client is reporting a gap appearing between the top level menu items and the menu items that appear below them. On this machine it is
very difficult to hover over the child menu items before they vanish.
This also happens when they look at the example on
www.asp.net so i don't think it is anything i have changed (very little other than applying variable width and removing the right arrow graphic from top menu item, both fixes found on this forum).
I have applied a temporary fix by adding a short delay at the start of Unhover__AspNetMenu(element) in Menuadapter.js - however this is far from ideal as i'm sure you would agree, especially if 99% of clients would never see this.
I noticed when looking at the IE Version on this particular client that the Version shows as
6.0.2800.1106IC (compared to 6.0.2800.1106 on other test clients) and has five extra updates
Q867801, Q832894, Q824145, Q858750 and Q903235 as well as showing "This is a customized version of Internet Explorer".
Has anyone else experienced this and if so are there other more graceful solutions to this problem? E.g. a fix or even just a better workaround to only apply the delay when required by the client to minimise impact on users that do not see this gap.
Any help gratefully received.
Aug 21, 2006 05:01 PM|Russ Helfand|LINK
I'm guessing that this problem is specific to the version of IE that you mentioned, 6.0.2800.1106IC... but that is really just a guess.
Regardless, as you pointed out, we need to develop a solution that works for that rev of the browser while not impacting the experience (which is good) had by visitors using other browsers.
Though I don't have an immediate solution to offer (because I can't dup the problem 'cause I don't have that rev of IE loaded on any machines here)... I can suggest a way for you to proceed. Perhaps you and I can partner in fixing this.
Start by reviewing the CSS used by this adapter kit to make the sample menus (which you said you used, for the most part, in your live site),
Down on line 133 you see this:
.PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
The top:2em property is what forces the first set of submenus to be pushed down below the top tier of horizontal menu items. The third (and successive) tiers are then vertically offset by a smaller amount which is set earlier in that style sheet at line
35 using this rule:
.PrettyMenu ul.AspNet-Menu ul
So the first set of submenus is pushed down 2em but all subsequenct submenus (3rd tier, 4th tier, etc.) only drop 3px. The 2em drop is needed because the submenu needs to get below the whole parent menu item rather than being pushed to the left (by 128px)
I'm guessing that, somehow, IE 6.0.2800.1106IC is interpretting and rendering 2em somewhat differently than other versions of IE. There are other reports of rendering differences between IE 6.0.2800.1106IC and other revs. If that were true, and if IE 6.0.2800.1106IC
rendered 2em as a bigger gap, then the submenus below the 1st tier would drop too low below those top tier menu items and you would have the problem that you reported.
Sooooooooooooooooo.... here's what I would try if I were you. I would temporarily modify your rule such that you use a value other than 2em to push down the submenu below the top tier of menu items. I'd use something like 1.7em or (gasp!) switch over to
using a non-varient measurement like pixels (15px or 20px might do the trick initially but you'd need to test this).
Aug 21, 2006 05:44 PM|Monkey@Keyboard|LINK
Cheers for the quick reply.
I am just away to wrap up for today but have spent the day reading up on stylesheets etc. and have started to remove 'em' values from MenuExample.css as you have suggested.
I have hard coded the size of the menu font and item height and have started to play around with using pixels rather than 'em'.
Aug 22, 2006 12:05 PM|Monkey@Keyboard|LINK
I fixed the top of the menu at 25px:
/* Height of top level Menu Items */
And then there were only two 'em' values that needed changing:
Thanks again for your help - it was probably obvious to anyone with a longer history in web development and css in particular but i have to say 'em' was new to me so it took a while to track down where it was going wrong.
Keep up the good work - the adapters are easy to understand and even easier to use and the support is second to none.