Menu Adapter in IE6 shows blank page

Jun 13, 2007 at 2:36 AM
My menu works great in IE7 and firefox but it's not working in IE6 - it just shows a blank page. I've dumbed it down as much as possible here:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
</form>
</body>
</html>


And this is the html that's generated:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title><style type="text/css">
.Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.Menu1_1 { text-decoration:none; }
.Menu1_2 { }

</style></head>
<body>
<form name="form1" method="post" action="testmenu.aspx" id="form1">
<div>
<input type="hidden" name="_VIEWSTATE" id="_VIEWSTATE" value="/wEPDwULLTEzNDM1ODM1MjcPZBYCAgMPZBYCAgEQPCsADQIADxYCHgtfIURhdGFCb3VuZGdkDBQrAAIFAzA6MBQrAAIWDh4EVGV4dAUESG9tZR4FVmFsdWUFBEhvbWUeC05hdmlnYXRlVXJsBQovSG9tZS5hc3B4HgdFbmFibGVkZx4KU2VsZWN0YWJsZWceCERhdGFQYXRoBQovaG9tZS5hc3B4HglEYXRhQm91bmRnFCsABQUPMDowLDA6MSwwOjIsMDozFCsAAhYOHwEFEUNvcnBvcmF0ZSBQcm9maWxlHwIFEUNvcnBvcmF0ZSBQcm9maWxlHwMFFi9Db3Jwb3JhdGVQcm9maWxlLmFzcHgfBGcfBWcfBgUWL2NvcnBvcmF0ZXByb2ZpbGUuYXNweB8HZ2QUKwACFg4fAQUJUG9ydGZvbGlvHwIFCVBvcnRmb2xpbx8DBQ8vUG9ydGZvbGlvLmFzcHgfBGcfBWcfBgUPL3BvcnRmb2xpby5hc3B4HwdnZBQrAAIWDh8BBQhTZXJ2aWNlcx8CBQhTZXJ2aWNlcx8DBQ4vU2VydmljZXMuYXNweB8EZx8FZx8GBQ4vc2VydmljZXMuYXNweB8HZ2QUKwACFg4fAQUMQ29udGFjdCBJbmZvHwIFDENvbnRhY3QgSW5mbx8DBREvQ29udGFjdEluZm8uYXNweB8EZx8FZx8GBREvY29udGFjdGluZm8uYXNweB8HZ2RkZGQ=" />
</div>


<script src="/WebResource.axd?d=NXRT6kjm2zyxWldimMOYskIdtdNJSrDmjS6CjN070zdeV6sI7VP4Xfk9ElAhFQRR0L80umHct--6Qkqmn9RA2&t=633170050011884538" type="text/javascript"></script>
<script src="/WebResource.axd?d=NXRT6kjm2zyxWldimMOYskIdtdNJSrDmjS6CjN070zeIaAaYhWxKLSTVR1BQvh32S2EOOsopSh7rBOsPIzMZwA2&t=633170050011884538" type="text/javascript"></script><link href="/WebResource.axd?d=NXRT6kjm2zyxWldimMOYss3z6xQQNId4gzAOye7vwhsKN-wOKWJ-udZwjM2qRbos0&t=633170050011884538" type="text/css" rel="stylesheet"></link><link href="/WebResource.axd?d=NXRT6kjm2zyxWldimMOYsqvJZ6ksap2xiks4i5ZgIwJHE3N9nt-IMaptQdFS4Oz17FBuwCAY1r3Q2JHAtrlotA2&t=633170050011884538" type="text/css" rel="stylesheet"></link>
<div>

<div class="AspNet-Menu-Vertical" id="Menu1">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="/Home.aspx" class="AspNet-Menu-Link">
Home</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="/CorporateProfile.aspx" class="AspNet-Menu-Link">
Corporate Profile</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/Portfolio.aspx" class="AspNet-Menu-Link">
Portfolio</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/Services.aspx" class="AspNet-Menu-Link">
Services</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/ContactInfo.aspx" class="AspNet-Menu-Link">
Contact Info</a>
</li>
</ul>
</li>
</ul>

</div>

</div>
</form>
</body>
</html>


Any ideas what the problem could be? I can't believe no one has posted about this yet - makes me think I'm doing something wrong...

Thanks in advance,
Clint
Jun 15, 2007 at 4:58 PM
Same problem here. Have been looking at this for the past day and can't figure it out. Works in FF but is blank in IE6

My generated HTML looks a little different:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>

<link rel="stylesheet" type="text/css" href="site.css" />
<link id="ctl00_AdaptersInvariantImportCSS" rel="stylesheet" href="~/CSS/Import.css" type="text/css" />
<!--if lt IE 7>
<link rel="stylesheet" href="CSS/BrowserSpecific/IEMenu6.css" type="text/css" />
<!endif-->

<style type="text/css">
.ctl00Menu10 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00Menu11 { text-decoration:none; }
.ctl00Menu12 { }

</style></head>
<body>
<form name="aspnetForm" method="post" action="index.aspx" id="aspnetForm">
<div>
<input type="hidden" name="_VIEWSTATE" id="_VIEWSTATE" value="/wEPDwULLTEwMDUyNjbhjhkZAaHWgpBSz7uMGzGfWgUEoG/Kz/f4" />
</div>

<script src="/www.mysite.com/JavaScript/AdapterUtils.js" type="text/javascript"></script>
<script src="/www.mysite.com/JavaScript/MenuAdapter.js" type="text/javascript"></script>

<div class="AspNet-Menu-Vertical">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ctl00$Menu1','bNew Item')" class="AspNet-Menu-Link">
New Item</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ctl00$Menu1','bNew Item')" class="AspNet-Menu-Link">
New Item</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ctl00$Menu1','bNew Item')" class="AspNet-Menu-Link">
New Item</a>
</li>
</ul>
</div>


And I have the links to the stylesheets in my code:


<%--<link rel="stylesheet" type="text/css" href="site.css">
<link runat="server" rel="stylesheet" href="Menu.css" type="text/css" id="AdaptersInvariantImportCSS" />
<!--if lt IE 7>
<link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css">
<!endif-->
--%>

The menu control is pretty basic though:

<asp:Menu ID="Menu1" runat="server">
<Items>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
</Items>
</asp:Menu>


Any help is appreciated, thanks,
Javier.





Jun 15, 2007 at 5:04 PM
Setting the position to 'static' in Menu.css seems to fix the display issue on IE6 as discussed here: http://forums.asp.net/p/1035613/1430194.aspx#1430194

ul.AspNet-Menu
{
position: static;
}


But, can anyone explain why?
Apr 25, 2008 at 2:01 AM
I have made the following changes in IEMenu6.css and it works fine for horizontaly oriented menus.

ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
/* height: 1% !important; This line results in making the menu invisible */
}

ul.AspNet-Menu ul
{
visibility: visible !important;
width: 1%; /* This was the only way I found to make the drop down items appear vertical */
}