I had a question regarding display problems with IE. I use yui-ext for the basic layout of my page then iframes for the content. When I load the page in FF the page loads fine. However when I load the page in IE it looks like it strips out all of the javascript. I've checked the site on several computers and all of them have javascript enabled but still don't display correctly.
The code for the index page is:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Wilz Modz - For all your programming needs</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="SHORTCUT ICON" href="images/favicon.ico" />
<!--
=========================================================
Necessary references to the YUI and Jack Slocum's yui-ext
=========================================================
-->
<script type="text/javascript" src="js/yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="js/yui-ext/yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="js/yui-ext/resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="js/yui-ext/resources/css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="js/yui-ext/resources/css/layout.css"/>
<link rel="stylesheet" type="text/css" href="css/homepage.css" />
<link rel="stylesheet" type="text/css" href="css/homemenu.css"/>
<script type="text/javascript" src="js/homepage.js"></script>
</head>
<body class="ytheme-blue">
<div id ="container">
<!--
======================
Set Content for Header
======================
-->
<div id="north" class="ylayout-inactive-content">
[Hide Header]
[img]images/WM_Banner.jpg[/img]
Wilz Modz, For all your programming needs
</div>
<!--
======================
Set Content for Footer
======================
-->
<div id="footer" class="ylayout-inactive-content">
Wilz Modz, 2007
</div>
<!--
=========================
Set Content for Left Menu
=========================
-->
<div id="nav" class="menufiller">
<div class="toolbar">[img]images/menu/home.png[/img]Home</div>
<div class="toolbar">[img]images/menu/news.png[/img]News</div>
<div class="toolbar">[img]images/menu/download.png[/img]Downloads</div>
<div class="toolbar">[img]images/menu/projects.png[/img]Projects</div>
<div class="toolbar">[img]images/menu/images.png[/img]Images</div>
</div>
<div id="content" class="ylayout-inactive-content"></div>
<!--
====================
Content for Home Tab
====================
-->
<iframe id="iHome" frameborder="0" width="97%" height="92%" src="Home.htm">We're sorry for the inconvenience. It appears your browser does not support IFrame</iframe>
<!--
====================
Content for News Tab
====================
-->
<iframe id="iNews" frameborder="0" width="97%" height="92%" src="News.htm">We're sorry for the inconvenience. It appears your browser does not support IFrame</iframe>
<!--
=========================
Content for Downloads Tab
=========================
-->
<iframe id="iDownloads" frameborder="0" width="97%" height="92%" src="Downloads.htm">We're sorry for the inconvenience. It appears your browser does not support IFrame</iframe>
<!--
========================
Content for Projects Tab
========================
-->
<iframe id="iProjects" frameborder="0" width="97%" height="92%" src="Projects.htm">We're sorry for the inconvenience. It appears your browser does not support IFrame</iframe>
<!--
======================
Content for Images Tab
======================
-->
<iframe id="iImages" frameborder="0" width="97%" height="92%" src="Images.htm">We're sorry for the inconvenience. It appears your browser does not support IFrame</iframe>
</div>
</body>
</html>
Here's the code for the homepage (index) javascript:
Code:
//=======================================================================
//This javascript file stores the code for the home page tabbed interface
//=======================================================================
var layout
Example = function(){
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
//=====================
//Properties for header
//=====================
north: {
split:true,
initialSize: 80,
titlebar: false,
maxSize: 80
},
//=====================
//Properties for footer
//=====================
south: {
split:false,
initialSize: 20
},
//=============================
//Properties for right menu bar
//=============================
west: {
split: true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
//==================================
//Properties for center content area
//==================================
center: {
titlebar: true,
autoScroll: true,
closable: false,
tabPosition: 'top'
}
});
layout.beginUpdate();
//==========================
//Create the top tab, header
//==========================
layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
//=============================
//Create the bottom tab, footer
//=============================
layout.add('south', new YAHOO.ext.ContentPanel('footer'));
//Create the left, menu tab
//=========================
layout.add('west', new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
//=======================================
//Create the first main content tab, Home
//=======================================
layout.add('center', new YAHOO.ext.ContentPanel('iHome', {title: 'Home'}, {fitToFrame:true}));
//===================
//Create the News tab
//===================
layout.add('center', new YAHOO.ext.ContentPanel('iNews', {title: 'News'}, {fittoFrame:true}));
//========================
//Create the Downloads tab
//========================
layout.add('center', new YAHOO.ext.ContentPanel('iDownloads', {title: 'Downloads'}));
//=======================
//Create the Projects tab
//=======================
layout.add('center', new YAHOO.ext.ContentPanel('iProjects', {title: 'Projects'}));
//=====================
//Create the Images tab
//=====================
layout.add('center', new YAHOO.ext.ContentPanel('iImages', {title: 'Images'}));
layout.endUpdate();
layout.getRegion('center').showPanel('iHome')
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
Thanks in advance for any help.
IE display problems
Reply With Quote