Currently, I am utilizing the DDCharts jQuery plugin from DDCharts JQuery to incorporate some charts into my website. After downloading the plugin and testing it in various browsers, I encountered an issue specifically with Internet Explorer 8+. Strangely, while the original files and examples worked fine in IE on their own, when integrated into my website, they failed to display properly in IE but functioned perfectly in Firefox. The root cause of this discrepancy remains unknown to me. Any insights or suggestions would be greatly appreciated!
Below is the code snippet I am working with:
PSI - Dashboard
<!-- **************************************************** -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=2191c0&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=75&borderColorHeader=4297d7&fcHeader=eaf5f7&iconColo...
<p></p>
<p></p>
<pre><code><div class="page">
<div id="header" >
<div class="HeadTop">
<h2 style="color:Red"> TEST System</h2>
</div>
</div>
<div id="main">
TEST - Dashboard
<!-- *********************************************************************************************** -->
<!-- For the Charts -->
<div id="switcher" style="position:relative; height:5%; width:100%;"></div>
<div style="position:relative; width:100%;height:95%;">
<div id="chart_div_static" style="position:relative; height:95%; width:100%;"></div>
<div id="loading-Notification_static" class="chart_loading ui-widget ui-widget-content ui-state-error">Loading...</div>
</div>
<div class="ui-widget-header ui-state-active" style="padding:7px 0 7px 10px">
Source
<button class="ui-button ui-state-default ui-corner-all" style="float:right; padding:2px;" onClick="window.open('Source/DDChart_Source.zip','_blank');">Download</button>
</div>
<!-- *********************************************************************************************** -->
</div>
</div>