I have the below html that is supposed to create a fly out Menu. In Chrome and FF it works as expected. Unfortunately in IE8 all I get is a tiny white box & in IE9 it does nothing at all. I used the Developer Tools(F12) and monitored the Network which showed the following successful GET --> /icenter/config/wwcMenuContent.html GET 304 text/html 473 B 109 ms JS Library XMLHttpRequest 156 0 109 0 0 47
Anyone help me out here?
MenuControl
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fg.menu.js"></script>
<link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet"/>
<link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet"/>
<!-- style exceptions for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<![endif]-->
<script type="text/javascript">
$(function(){
// or from an external source
$.get('wwcMenuContent.html', function(data){ // grab content from another page
$('#hierarchy').menu({
autoShow: true, //SSLOAN set to auto show
content: data,
backLink: false,
crumbDefaultText: ' '
});
});
});
</script>
</head>
<body>
<!-- We override there stylesheet here so the div doesn't appear to the eye -->
<div id="hierarchy" style="border:solid 1px white; width:0px;"><img style="width:15px; height:10px; vertical-align:top; border:none;" alt=" " src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div>
</body>
MenuContent
<ul>
<li><a href="#">AODA/MH Center</a>
<ul>
<li><a href="http://wwcshare/icenter/SitePages/AODA%20Information.aspx">AODA Information</a></li>
<li><a href="http://wwcshare/icenter/SitePages/Community%20Resources.aspx">Community Resources</a></li>
<li><a href="http://wwcshare/icenter/SitePages/Consultant%20Schedules.aspx">Consultant Schedules</a>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Chuck_norris">Chuck Norris</a></li>
<li><a href="http://en.wikipedia.org/wiki/Darth_vader">Darth Vader</a></li>
<li><a href="http://en.wikipedia.org/wiki/Jackie_chan">Jackie Chan</a></li>
<li><a href="http://en.wikipedia.org/wiki/Steve_jobs">Steve Jobs</a></li>
</ul>
</li>
<li><a href="http://wwcshare/icenter/SitePages/Guidelines,%20Policies%20and%20Service%20Expectations.aspx">Guidelines, Policies, and Service Expectations</a></li>
<li><a href="http://wwcshare/icenter/SitePages/Mental%20Health%20Information.aspx">Mental Health Information</a></li>
<li><a href="http://wwcshare/icenter/SitePages/Tools%20and%20Forms.aspx">Tools and Forms</a></li>
<li><a href="http://wwcshare/icenter/SitePages/Topics,%20Schedules%20and%20Sign-Up%20Sheets.aspx">Topis, Schedules, and Sign-Up Sheets</a></li>
</ul>
</li>
<li><a href="#">Case Management Center</a></li>
<li><a href="#">Forms Center</a></li>
<li><a href="#">Functional Screen Center</a></li>
<li><a href="#">MCO Benefit Package Center</a></li>
<li><a href="#">Self-Directed Supports Center</a></li>
<li><a href="#">Social Service Specialist Center<a></li>
</ul>
Good Lord, you ain't kidding IE is picky. my last <a></a>
is 开发者_运维知识库missing the /
. That was causing the entire page to not display. Thanks.
Is there the last-line missing in your post, or do you actually have the closing </ul>
missing. If so, that will do it.
IE is very much more fussy than the other browsers with regard to the correct validity of code coming in via AJAX methods. Always make sure it is perfectly valid or IE will just do nothing.
The problem may be due to the lack of a <!DOCTYPE
declaration. This makes IE run in Quirks Mode, causing unexpected behaviour and lack of functionality. Try adding the correct <!DOCTYPE
to the HTML file and see if this makes any difference.
精彩评论