IE6 PrettyMenu flickering problem

Last post 04-13-2007 10:43 AM by Russ Helfand. 6 replies.

Sort Posts:

  • IE6 PrettyMenu flickering problem

    03-27-2007, 5:12 AM
    • Loading...
    • LordNemesis
    • Joined on 02-23-2007, 12:21 PM
    • Posts 9

    I've recently implemented CSS friendly control adapters by using PrettyMenu. At first everything seemed ok, but I discovered that in IE6 the menu is flickering (all other browsers are showing it correctly). After a bit google-ing I found that the flicker problem is caused by background image caching.

    The fix for this problem is discribed here: http://www.groovybits.com/leftOverBits/flickerFix.aspx. I copied the PersistantImage.ashx  from this link to the root of my website.

    I tried the fix, and was confident that it would work. But it doesn't. The menu is not flickering anymore, but the background image is not showing instead.

    Here's the code:

    KR_Menu.css:
    .PrettyMenu ul.AspNet-Menu li
    {
    background: url (../PersistantImage.ashx?key=BasicBgNav) repeat-x;
    }

    web.config:
    <
    appSettings>
    <add key="BasicBgNav" value="~/App_Themes/KR_default/bg_nav.jpg"/>
    </
    appSettings>

  • Re: IE6 PrettyMenu flickering problem

    03-27-2007, 4:41 PM
    • Loading...
    • Russ Helfand
    • Joined on 09-14-2005, 2:22 PM
    • Groovybits.com
    • Posts 740

    The example that I posted at http://www.groovybits.com/leftOverBits/flickerFix.aspx presumed that you put your style sheets in a folder that was DIRECTLY beneath the root of your site. In that situation, the double-dots in the url for the background image brings you up one level to the root folder. If, however, you are working with a style sheet that is in an ASP.NET theme folder then you are in a situation where the style sheet is TWO levels below the root. In that case, the proper path would be:

    ../../PersistantImage.ashx?key=BasicBgNav

    Notice that this has two doulbe-dot sets to bring you up TWO levels. That would bring you to the root if this were used in a style sheet in a theme folder.

    Does that help?

    Russ Helfand
    Groovybits.com
  • Re: IE6 PrettyMenu flickering problem

    03-28-2007, 3:57 AM
    • Loading...
    • LordNemesis
    • Joined on 02-23-2007, 12:21 PM
    • Posts 9

    I can't believe I lost almost a days work on that one. Indifferent

    The extra ../ (I thought that it was a typo...) did the trick.

    Thank you Russ!

  • Re: IE6 PrettyMenu flickering problem

    04-12-2007, 7:24 AM
    • Loading...
    • kallileo
    • Joined on 03-21-2007, 7:08 AM
    • Hellas
    • Posts 24
    So if I have the PersistantImage.ashx in the root directory and the bg image of the menu in the /Images directory the fix would be:

    .PrettyMenu ul.AspNet-Menu li
    {
    background: url(../PersistantImage.ashx?key=BasicBgNav) repeat-x;
    margin:0 2px 2px 0;
    }

    <appSettings>
    <add key="BasicBgNav" value="~/Images/bg_nav.gif"/>
    </appSettings>

    Correct or No????

  • Re: IE6 PrettyMenu flickering problem

    04-12-2007, 9:44 AM
    • Loading...
    • Russ Helfand
    • Joined on 09-14-2005, 2:22 PM
    • Groovybits.com
    • Posts 740

    Because your image is in the Images folder beneath the root, it is correct to set the value of the key (in the web.config) as you proposed to "~/Images/bg_nav.gif". That part is fine but is completely independent of where you happen to put the handler (ASHX file). If, as you proposed, you put the handler in the root folder then the path to it from a CSS file in a subfolder of the root is, as your sample shows, ../PersistantImage.ashx. However, if your CSS file is in a SUBsubfolder (that is, two folders down in the hierarchy from the root) then the url for the background should refer to ../../PersistantImage.ashx in order to ascend two levels to reach the place where the handler is kept.

    Remember, when you are stipulating the background's url to be the handler you have to provide a path to the PeristantImage. You can do so with a site-relative path (one that starts with a forward slash) or you can use a relative path. If you use a relative path then you have to remember that it is relative to where the CSS file lives. So you need to ascend as many levels up and then descend (if necessary) to wherever the handler lives.

    You might also consider simply putting the handler in the same folder as your CSS file. Then you don't need a path in front of PersistantImage.ashx at all!!!

    Good luck. Let me know if the flicker fix makes a difference for you.

    Russ Helfand
    Groovybits.com
  • Re: IE6 PrettyMenu flickering problem

    04-13-2007, 3:26 AM
    • Loading...
    • kallileo
    • Joined on 03-21-2007, 7:08 AM
    • Hellas
    • Posts 24
    All my web files are in "Project" folder. The images for the menu are in the "Images" subfolder and the css styles in the "Stylesheets" subfolder.
    I put the PersistantImage.ashx file in the "Stylesheets" folder as you said and modified the css and webconfig files:

    .PrettyMenu ul.AspNet-Menu li
    {
    background: url(PersistantImage.ashx?key=bg-menu-example.png) repeat-x;
    margin:0 2px 2px 0;
    }


    <appSettings>
    <add key="BasicBgNav" value="~/Images/bg-menu-example.png"/>
    </appSettings>

    and it doesn't work...

  • Re: IE6 PrettyMenu flickering problem

    04-13-2007, 10:43 AM
    • Loading...
    • Russ Helfand
    • Joined on 09-14-2005, 2:22 PM
    • Groovybits.com
    • Posts 740

    background: url(PersistantImage.ashx?key=BasicBgNav) repeat-x;

    You are creating a key in your app settings so you can use it (rather than the file name) when you invoke the handler.

    Russ Helfand
    Groovybits.com
Page 1 of 1 (7 items)
Microsoft Communities
Page view counter