CODEWITHSUNDEEP
javascriptjqueryinternet-explorergoogle-chromecross-browser
Refracted Paladin
Refracted Paladin

Reputation: 12216

My page does not display in IE but does in Chrome and Firefox?

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.

Upvotes: 1

Views: 3526

Answers (2)

Orbling
Orbling

Reputation: 20602

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.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

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.

Upvotes: 1

Related Questions