none
TopNavFlyOuts won't display in IE but will display in FireFox, Chrome etc RRS feed

  • Question

  • My company decided it would like to add 1 level flyouts to the website which seems easy enough but I have an issue I just can't figure out.

    I changed the master to display 1 level and added CSS to format the flyouts. In Internet Explorer, the flyouts are a big blank white box and no text that can be clicked, no colors, nothing, but the width of the flyouts is just as expected and it's placed on the page as expected. So it picked up a couple of properties in the CSS but nothing else. In FireFox, Chrome and Safari, the flyouts are showing up just fine. This is just wacky to me. Has anyone run across? Any ideas?

    Thanks in advance.

    Tuesday, April 27, 2010 1:26 PM

All replies

  • It sounds like you just need to do some work on your CSS to get it to the point where it will work in all browsers.  You should always test your changes on the full complement of target browsers, of course.

    M.


    Marc D Anderson - Sympraxis Consulting LLC - Marc D Anderson's Blog - @sympmarc - jQuery Library for SharePoint Web Services (SPServices)
    Tuesday, April 27, 2010 8:25 PM
  • Hi Marc!

    I'll have to keep looking, but it's definitely strange behavior. CSS is something I've never had trouble with since learning it. I actually took the same CSS from a site where it is working just fine and put it into mine and while in all the non-IE browsers it looks just the same as it did on the other site, it doesn't have anything there in IE.

    Just something as simple as "background: blue" will show up in nonIE browsers but IE is blank -- the subsites/pages aren't even able to be clicked ... a white space is there with what should be filled in with links/words etc but there's absolutely nothing

    Tuesday, April 27, 2010 9:27 PM
  • Branding is about the hardest thing to debug through the forums, unfortunately. (Can you move it over a pixel? No, to the left!)

    M.


    Marc D Anderson - Sympraxis Consulting LLC - Marc D Anderson's Blog - @sympmarc - jQuery Library for SharePoint Web Services (SPServices)
    Tuesday, April 27, 2010 9:32 PM
  • Do you have some kind of Flash video running on that page. Navigation flyouts could be hidden behind them.I had faced the same problem wherein the flyouts were hiding behind Flash.
    Wednesday, April 28, 2010 5:45 AM
  • Marc - I agree... thanks for trying though!

    Smriti - nope, no flash elements, it's actually a very simple page, minimal graphics

    Wednesday, April 28, 2010 1:05 PM
  • I am having the exact same issue. The topnav flyout is showing as a white box with a thin sliver of something on the left side...

    I've played around with several of the CSS properties but it's difficult to debug because the flyout only appears when you hover over the static menu item.

    Here are some of the css properties I have tried overriding from core.ss

    .ms-topNavFlyOutsContainer{
    position:relative;
    background-color:#990000;
    font-size:9pt !important;
    }
    .ms-topNavFlyOuts{
    background-color:transparent;
    font-size:9pt !important;
    font-family:arial;
    }
    .ms-topNavFlyOuts a{
    display:inline;
    *width:120px;
    min-width:120px;
    color:#333333;
    padding:4px 8px 4px 8px;
    font-size:9pt !important;
    font-style:normal !important;
    }
    .ms-topNavFlyOutsHover{
    background-color:#F0F0F0;
    color:#000000;
    }
    
    
    Wednesday, September 1, 2010 4:14 PM
  • I did find a workaround. It seems to be a rendering bug in IE8. Unfortunately I do not know the root cause; forcing IE7 rendering is the only workaround I could find.

    Add this meta-tag to your master page -

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Reference -

    http://panvega.wordpress.com/2009/04/08/sharepoint-navigation-fly-outs-problem-with-ie8/

     

    • Proposed as answer by Jermski Wednesday, September 1, 2010 5:32 PM
    Wednesday, September 1, 2010 5:32 PM