SharePoint Navigation Fly-Outs problem with IE8
Posted by PANVEGA on April 8, 2009
Problem:
I configured the SharePoint QuickLinks Navigation SiteMapProvider properties to show a FlyOut menu. However after installing IE 8, the Flyouts were shown in a white box without any content links.
Approach:
Add this meta Tag to your MasterPage between the <head> tages.
<meta http-equiv=”X-UA-Compatible” content=”IE=IE7″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
The first will force a page to render in IE7 mode no matter what, and the second forces a page to render as IE7 would have rendered it historically. The difference being the EmulateIE7 meta tag will force the browser to look for a DocType before rendering in IE7 mode and if it does not find one it will render in Quirks Mode. This is the correct behavior for how IE7 used to render pages and I believe the correct one that should be added to all custom current version SharePoint master pages.
EmulateIE7 tells IE8 to display standards DOCTYPEs in IE7 Standards mode, and Quirks DOCTYPEs in Quirks mode. Available through the IE June Security Update for IE8 Beta 1
- If IE8 sees a valid DocType declared it will attempt to render a site in IE8 Standards Mode.
- If IE8 does not see a DocType it will attempt to render a site in quirks mode (otherwise known as pre IE7 rendering mode).
Informations:
Internet Explorer 8 introduces document compatibility. An extension of the compatibility mode introduced in Internet Explorer 6, document compatibility enables you to choose the specific rendering mode that Internet Explorer uses to display your web pages, to help ensure that your web pages have a consistent appearance. Although IE8 has “Compatibility View” settings (including a checkbox to “display all websites in Compatibility View”), you cannot rely on users to use these settings.
As a developer, you probably already have your site “doing what you want” for Internet Explorer 7, so the easiest way to control page rendering in IE8 is to use the new “Meta” element to enforce IE 7 rendering behavior.
Here are the various modes supported:
- Emulate IE8 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 8 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the <!DOCTYPE> directive.
- Emulate IE7 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the <!DOCTYPE> directive. For many Web sites, this is the preferred compatibility mode.
- IE5 mode renders content as if it were displayed by Internet Explorer 7’s quirks mode, which is very similar to the way content was displayed in Internet Explorer 5.
- IE7 mode renders content as if it were displayed by Internet Explorer 7’s standards mode, whether or not the page contains a <!DOCTYPE> directive.
- IE8 mode provides the highest support available for industry standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API , and limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) .
- Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 8, this is equivalent to IE8 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE8 mode when viewed with Internet Explorer 8.
More Information:
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
http://blog.drisgill.com/2009/03/problems-with-ie8-standards-mode.html
PANVEGA's Blog 
Jake said
Thanks for this info. I put the meta tags on my Master page but still I am having the same whitebox fly-outs in IE8. Any other ideas?
Hemant said
use this in ur master page head tag
Title must be below meta tag
and add this in ur web.config file
Erik said
PANVEGA,
Don’t you think though that rendering your entire Sharepoint site in the IE7 standards mode just for the navigation to work is not really worth it considering all the benefits to improved layouts in IE8? Right now I’m customizing Sharepoint and would like to take advantage of the better rendering of html that IE8 now has, so to me there should be a way to fix these flyout problems without simply rendering it the old way. What if one day management decides IE8 is the standard, then you have to figure out how to get it to work in the new IE8 standards mode. That’s what is in the future no matter what, so have you looked at working around the display issues?
Erik