locked
FIX: IE7 ghost menu problem RRS feed

  • Question

  • User-534056067 posted

    Thanks to Markus Mielke, Arron Eicholz and Yin Xie for developing the following fix for the IE7 "ghost menu" problem.  All three are on the Microsoft's IE team and are, in my opinion, both brilliant and enthusiastic about helping the community.  They have my respect and thanks.

    For earlier references to the problem see http://forums.asp.net/thread/1425916.aspx.

    The problem is due to a bug.  I think we all understood that.  I'm assured it will be fixed in the future, though I don't know when exactly.  Happily, we can work around the problem quite easily.  Those of you using beta 3 of the CSS Friendly adapter kit can do the following.

    1. Delete CSS\BrowserSpecific\IEMenu7.css.  I'm very pleased to say that it seems that we do not need any special rules to get menus to work well in IE7.
    2. Delete any and all conditionally linked references to IEMenu7.css.  You'll find these in the <head> of your page or master page.
    3. Replace the contents of CSS\Menu.css with what is shown below.

    That's it.  I made these changes and my test menus work well in all of the browsers I've tried: IE6, IE7, Opera, Navigator and Firefox.  I've not yet tested Safari.

    If you want to help, please reply on this thread to let us know whether or not this fix works for you.  Please report both successes and failures.  And be sure to detail what browsers and platforms you tested.  I want to be sure that this fix is well tested before we put it out officially in the next rev of the kit.  You can help by giving us this feedback.  Thanks and good luck.

    ***** NEW VERSION OF MENU.CSS ****

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */
    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */
    /* See WhitePaper.aspx for details. */

    ul.AspNet-Menu
    {
        ;
    }


    ul.AspNet-Menu,
    ul.AspNet-Menu ul
    {
        margin: 0;
        padding: 0;
        display: block;

    }

    ul.AspNet-Menu li
    {
        ;
        list-style: none;
    }

    ul.AspNet-Menu li a,
    ul.AspNet-Menu li span
    {
        display: block;
        text-decoration: none;
    }

    ul.AspNet-Menu ul
    {
        ;
        visibility: hidden;   
    }

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: hidden;
    }

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }


    /* -------------------------------------------------------------------------- */
    /* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */
    /* whose class is AspNet-Menu-Horizontal. This allows us to force the top tier of the menu to layout */
    /* horizontally, whereas all subsequent tiers of the menu lay out vertically. */

    .AspNet-Menu-Horizontal ul.AspNet-Menu li
    {
        float: left;
    }

    Monday, November 6, 2006 9:45 PM

All replies

  • User1618900539 posted

    Hi Russ, 

    After one day of testing, here are my findings. I've tested on IE6, IE7, Opera and Firefox 2: 

    First, the good news: [:D]

    1) It's working, the ghosts have disappeared!!!!
    2) Is true that you don't need any more a specific IE7.css file.

     

    But, the bad news: [:(]

    1) Now, the IE6 menus are "slow". It means that now it takes a few seconds between you hover over a menu item and the item to become "selected" and, if applicable, the child items to appear.
    If I revert back to "display" declarations instead of "visibility" everything is fine...............with IE6, because, of course, the IE7 ghosts are back.
    And it doesn't happen with Opera or Firefox.
    Any ideas on how to make both work?? Because this is annoying as the "ghost" bug (not everybody has updated to IE7, I still get much more IE6 hits that IE7 in my website) .
    If needed, I can send you privately a link where you can see this happening.

    And finally, a "ghost bug" unrelated comment:
    I still need an IE6.css file, because for an horizontal menu to work, I need to explicitly set the width of the li items, while you don't with the other browsers. I prefer not to set it fixed because I prefer to get it dynamically sized to contents,
    (I'm not saying this workaround was supposed to fix that, it's an IE6 bug which has nothing to do with this topic, but I'd like to point that I still need conditional CSS! :):):)

    Cheers,

    Juan 

    Tuesday, November 7, 2006 6:58 PM
  • User-534056067 posted

    Hi Juan,

    I'm not seeing the performance problem that you reported.  Can you double check your assertion?  I'm not doubting you.  I'm just not seeing this.  If you continue to see the problem, can you try making a test web site from the beta 3 version of the tutorial web template.  Modify it per the instructions above and then test its Menu.aspx sample page.  Does it, too, show a performance problem in IE6 for you?  It seems fine to me.

    Also, can you post a page where we can see the performance problem you noted?

    Thursday, November 9, 2006 10:50 PM
  • User1618900539 posted

    Hi Russ, thanks for your answer.

    I can completely understand what you're saying, because the issue doesn't happens on every page. For example, it doesn't happen in the sample website :)

    See, in my website, I have several adapted menus, and, althought I can notice an "almost unnoticeable" slower performance with them with IE6, in one specific page, the problem gets really worse.
    I'm wondering if it's ok if I send to you a link via email, because I have to send you a private user name and password. I believe that would be very helpful if you can "see" it actually happening, to, then, I can do further testing or modifications with your guidance.

    If it's ok for you, just let me know and I'll send you the info straight away.

    Cheers,

    Juan
     

    Thursday, November 9, 2006 11:28 PM
  • User-534056067 posted

    Hi Juan (and others), I have an idea. Let's see if the IE6 perfomance problem goes away if you change IEMenu6.css to have these rules (below).  They should revert IE6 back to using what it uses in beta 3 but still allow other browsers (like IE7) to use the newer rules (that fix the ghosting problem).

    Does this work?

    *****  IEMenu6.css ********************

     /*

    This file should contain SUPPLEMENTAL rules that are recognized and used only by IE.
    Similar files can be produced, as needed, for other browsers.  Whatever selectors are
    listed here should be listed in at least one other CSS file used in the current ASP.NET
    theme (thus making these supplemental).  The implementation pattern is to add new props
    to some existing rule or to override (using important) some property.

    */

    ul.AspNet-Menu li
    {
        float: left !important;
        height: 1% !important;
    }

    ul.AspNet-Menu li a,
    ul.AspNet-Menu li span
    {
        height: 1% !important;
    }

    .AspNet-Menu-Horizontal ul.AspNet-Menu li li
    {
        float: left !important;
    }

    /* Undoing rules used for IE7 and other browsers. */

    ul.AspNet-Menu ul
    {
        visibility: visible !important;   
    }

    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: visible !important;   
    }

    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible !important;   
    }

    /* Pre-IE7 rules used to avoid performance problems found when using the newer rules. */

    ul.AspNet-Menu ul
    {
        display: none;   
    }

    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li:hover ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul
    {
        display: none;
    }

    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul
    {
        display: block;
    }

    .AspNet-Menu-Horizontal ul.AspNet-Menu li li
    {
        float: none;
    }

    Friday, November 10, 2006 3:34 PM
  • User-1115514305 posted

    This issue seems to still be occuring. I've replaced the CSS and ghost menus still appear.

    Also, no one has posted screenshots of what this Ghost issue is.. is this the same issue?

     (This was taken in IE7)

     

    Ghost Issue

    Tuesday, July 24, 2007 11:49 AM
  • User-534056067 posted

    Yes, this is the ghost menu problem. Are you 100% certain that you are using the final version of the adapters that were releases to http://www.asp.net/cssadapters? Early versions had CSS that triggered this bug but I fixed that before the v1.0 version that is now posted to the site. I'm pretty sure that the DLL version of the kit at CodePlex has that fix but I'm not 100% certain. The critical CSS would be in the Menu.css file that is invariant over sites. That is, it is the Menu.css file that would typically be found in your site's CSS folder (not your site's theme folder). You might want to compare those CSS rules (on the site that has the problem) with the ones at http://www.asp.net/CSSAdapters/srcviewer.aspx?inspect=%2fCSSAdapters%2fCSS%2fMenu.css. Pay particular attention to the use of the CSS "visibility" property in some of the rules.

    ul.AspNet-Menu ul
    {
        ;
        visibility: hidden;   
    }

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: hidden;
    }

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }

    The use of "display" (with none/block) instead of "visibility" (with hidden/visible) in these rules will trigger the ghost menu problem.

    Tuesday, July 24, 2007 2:00 PM
  • User-1115514305 posted

    Russ,

       Thank you for your quick response.

     

    I'm still having the issue and i've compared the CSS files and they seem to be exactly the same. Below is a copy of the Menu.css:

    ***Menu.css*********

     

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    ul.AspNet-Menu

    {

    position: relative;

    }

     

    ul.AspNet-Menu,

    ul.AspNet-Menu ul

    {

    margin: 0;

    padding: 0;

    display: block;

    }

    ul.AspNet-Menu li

    {

    position: relative;

    list-style: none;

    float: left;

    }

    ul.AspNet-Menu li a,

    ul.AspNet-Menu li span

    {

    display: block;

    text-decoration: none;

    }

    ul.AspNet-Menu ul

    {

    position: absolute;

    visibility: hidden;

    }

    /* Add more rules here if your menus have more than three (3) tiers */

    ul.AspNet-Menu li:hover ul ul,

    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul

    {

    visibility: hidden;

    }

    /* Add more rules here if your menus have more than three (3) tiers */

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu li li:hover ul,

    ul.AspNet-Menu li li li:hover ul,

    ul.AspNet-Menu li.AspNet-Menu-Hover ul,

    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,

    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul

    {

    visibility: visible;

    }

    .AspNet-Menu-Vertical ul.AspNet-Menu li

    {

    width: 100%;

    }

    Tuesday, July 24, 2007 3:48 PM
  • User-534056067 posted

    That being the case, I'd next check to see if the same browser that shows you problems with your site shows the same problems with the sample page at http://www.asp.net/menu.aspx. If the sample page works but yours doesn't (in the same IE7 browser) then I'd start looking to see how your CSS differs from the sample's CSS. You've already made sure that the two have the same Menu.css. Now I'd start looking at how the sample's MenuExample.css (in the theme folder) differs from the CSS you've created for your menu. In fact, you might want to temporarily swap out your CSS rules and use those (or something very similar) from MenuExample.css. If that makes the ghost problem go away then I'd start morphing those (working) rules into your intended rules (the ones you'd hoped to use) but do it slowly so you can see when the ghost reappears. Remember that the IE team has already said that the ghost problem is a bug in IE7. They already have it recorded in the bug database and are hoping/intending to fix it in the future. Meanwhile, we have to just avoid tickling that bug. It feels as though somehow the combination of rules you are using (in CSS) are tickling the bug again. We need to experiment to avoid whatever you are doing that is making the problem resurface. I know that's very vague but it's the best I can do.

    Tuesday, July 24, 2007 4:31 PM
  • User-1115514305 posted

    Found the issue:

     

    In MenuAdapter.cs

    string cssTag = "<link href=\"" + Page.ResolveUrl(filePath) + "\" type=\"text/css\" rel=\"stylesheet\"></link>";

    needed to become

    string cssTag = "<!--[if lt IE 7]><link href=\"" + Page.ResolveUrl(filePath) + "\" type=\"text/css\" rel=\"stylesheet\"></link><![endif]-->";

    And that was the only difference between the pages.

     

    Thanks for your help

    Tuesday, July 24, 2007 5:21 PM
  • User-534056067 posted

    OK, you must be using code from CodePlex because the line that you've shown above isn't present in http://www.asp.net/CSSAdapters/srcviewer.aspx?inspect=%2fCSSAdapters%2fApp_Code%2fAdapters%2fMenuAdapter.cs&notree=true (the last version before the CodePlex effort took over). Have you contacted Brian M. via the CodePlex site to discuss this problem?

    Tuesday, July 24, 2007 5:37 PM
  • User1618900539 posted

    Hi!

    I'm using the latest CodePlex changeset (3710 think it is)  and that line doesn't exists in MenuAdapter.cs.

    Also, since I was one of the guys that initially reported the issue, I'm completely sure that, using the standard CodePlex code, the problem is not present.

     

    Cheers,

     

    Juan 

    Tuesday, July 24, 2007 5:56 PM
  • User-1115514305 posted

    It was the codeplex version, and the code was not modified until i made that change. Very wierd.

    Wednesday, July 25, 2007 10:56 AM