I recently found out about a program, IETester, to test my website http://www.gfcf14greendream.com/ on the different versions of internet explorer. While on chrome and firefox, my site looks like this:
But when I open my web site on IE8, I get this error:
The line for the greedream.js file is: document.getElementById("log").innerHTML = data; from the function:
function loadLog() {
$.get("/PHP/loadlog.php", function(data) {
document.getElementById("log").innerHTML = data;
});
}
which loads the text file with the info that you see on the text area to the right, the "site log". The site, in any case, doesn't look good:
Is it that the menu, log and header won't display well because they're within <object> tags? I use them to load those two from different html files:
This one for the header, <object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>
This one for the menu, <object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>
And this one for the log, <center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>
Would it be that the CSS is too advanced for the browser version? As you see, the background is not stretched and leaves blanks too:
I use this HTML code for the background,
<div id="background">
<img src="http://www.gfcf14greendream.com/images/greentwi.png" class="stretch" alt="" />
</div>
and this is the stretch class for it,
.stretch
{
width:100%;
height:100%;
}
For the menu, I use this code,
<div id="verticalmenu" style="display: table; padding-left: 50px; position: absolute; z-index: 999;" onmouseover="window.parent.stretch()"; onmouseout="window.parent.shrink();">
<ul id="nav" class="toplevel">
<li><a href="http://www.gfcf14greendream.com/programs.html" target="_parent" class="sublevel">Programs</a>
<ul>
<li><a href="http://www.gfcf14greendream.com/smssender.html" target="_parent">SMSSender</a></li>
<li><a href="http://www.gfcf14greendream.com/employmentassistant.html" target="_parent">EmploymentAssistant</a></li>
<li><a href="http://www.gfcf14greendream.com/typingtest.html" target="_parent">TypingTest</a></li>
</ul>
</li>
<li><a href="http://www.gfcf14greendream.com/games.html" target="_parent" class="sublevel">Games</a>
<ul>
<li><a href="http://www.gfcf14greendream.com/games/votebuster.html" target="_parent"> VoteBuster</a></li>
</ul>
</li>
<li><a href="http://www.gfcf14greendream.com/tutorials.html" target="_parent" class="sublevel">Tutorials</a>
<ul class="toplevel">
<li><a href="http://www.gfcf14greendream.com/tutorials/javatutorials.html" target="_parent" class="sublevel">Java</a>
<ul class="toplevel">
<li><a href="#" class="sublevel">Before Anything</a>
<ul>
<li><a href="http://www.gfcf14greendream.com/tutorials/javatutorials/javahistory.html" target="_parent">History</a></li>
<li><a href="http://www.gfcf14greendream.com/tutorials/javatutorials/javastructure.html" target="_parent">Structure</a></li>
</ul>
</li>
<li><a href="#">Beginning</a></li>
<li><a href="#">Intermediate</a></li>
<li><a href="#">Advanced</a></li>
<li><a href="#">Tests</a></li>
</ul>
</li>
<li><a href="http://www.gfcf14greendream.com/tutorials/csharptutorials.html" target="_parent">C#</a>
<ul class="toplevel">
<li><a href="#" class="sublevel">Before Anything</a>
<ul>
<li><a href="http://www.gfcf14greendream.com/tutorials/csharptutorials/csharphistory.html" target="_parent">History</a></li>
<li><a href="#">Structure</a></li>
</ul>
</li>
<li><a href="#">Beginning</a></li>
<li><a href="#">Intermediate</a></li>
<li><a href="#">Advanced</a></li>
<li><a href="#">Tests</a></li>
</ul>
</li>
<li><a href="http://www.gfcf14greendream.com/tutorials/cpptutorials.html" target="_parent">C++</a>
<ul class="toplevel">
<li><a href="#" class="sublevel">Before Anything</a>
<ul>
<li><a href="http://www.gfcf14greendream.com/tutorials/cpptutorials/cpphistory.html" target="_parent">History</a></li>
<li><a href="http://www.gfcf14greendream.com/tutorials/cpptutorials/cppstructure.html" target="_parent">Structure</a></li>
</ul>
</li>
<li><a href="#">Beginning</a></li>
<li><a href="#">Intermediate</a></li>
<li><a href="#">Advanced</a></li>
<li><a href="#">Tests</a></li>
</ul>
</li>
<li><a href="http://www.gfcf14greendream.com/tutorials/vbdotnettutorials.html" target="_parent">VB.NET</a>
<ul class="toplevel">
<li><a href="#" class="sublevel">Before Anything</a>
<ul>
<li><a href="http://www.gfcf14greendream.com/tutorials/vbdotnettutorials/vbdotnethistory.html" target="_parent">History</a></li>
<li><a href="#">Structure</a></li>
</ul>
</li>
<li><a href="#">Beginning</a></li>
<li><a href="#">Intermediate</a></li>
<li><a href="#">Advanced</a></li>
<li><a href="#">Tests</a></li>
</ul>
</li>
<li><a href="http://www.gfcf14greendream.com/tutorials/html5tutorials.html" target="_parent">HTML</a>
<ul class="toplevel">
<li><a href="#" class="sublevel">Before Anything</a>
<ul>
<li><a href="http://www.gfcf14greendream.com/tutorials/html5tutorials/html5history.html" target="_parent">History</a></li>
<li><a href="http://www.gfcf14greendream.com/tutorials/html5tutorials/html5structure.html" target="_parent">Structure</a></li>
</ul>
</li>
<li><a href="#">Beginning</a></li>
<li><a href="#">Intermediate</a></li>
<li><a href="#">Advanced</a></li>
<li><a href="#">Tests</a></li>
</ul>
</li>
<li><a href="http://www.gfcf14greendream.com/tutorials/fortran95tutorials.html" target="_parent">Fortran 95</a>
<ul class="toplevel">
<li><a href="#" class="sublevel">Before Anything</a>
<ul>
<li><a href="http://www.gfcf14greendream.com/tutorials/fortran95tutorials/fortran95history.html" target="_parent">History</a></li>
<li><a href="#">Structure</a></li>
</ul>
</li>
<li><a href="#">Beginning</a></li>
<li><a href="#">Intermediate</a></li>
<li><a href="#">Advanced</a></li>
<li><a href="#">Tests</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://blog.gfcf14greendream.com/" target="_parent">Blog</a></li>
<li><a href="http://www.gfcf14greendream.com/aboutme.html" target="_parent">About Me</a></li>
<li><a href="#" onclick='messageMe();'>Message Me</a></li>
<li><a href="http://www.gfcf14greendream.com/friendsites.html" target="_parent">My Friends</a>
<ul>
<li><a href="http://sniktasoftware.webs.com/" target="_parent">Snitka Software</a></li>
</ul>
</li>
</ul>
</div>
And this is all the CSS it uses:
ul#nav ,
ul#nav ul {
border-bottom: black 1px solid;
list-style-type: none;
margin: 0px;
list-style-image: none;
border-right: black 1px solid;
padding: 0px
}
ul#nav li {
position: relative;
list-style-type: none;
margin: auto;
list-style-image: none;
padding: 0px
}
ul#nav li li {
width: auto;
float: none
}
#nav a {
border-top: 1px solid #003200;
background: #003200;
background: -webkit-gradient(linear, left top, left bottom, from(#003200), to(#00c800));
background: -webkit-linear-gradient(top, #003200, #00c800);
background: -moz-linear-gradient(top, #003200, #00c800);
background: -ms-linear-gradient(top, #003200, #00c800);
background: -o-linear-gradient(top, #003200, #00c800);
text-align: left;
border-left: black 1px solid;
display: block;
font-family: Serif;
white-space: nowrap;
color: #ffffff;
font-size: 12pt;
border-top: black 1px solid;
text-decoration: none;
text-align: center;
padding: 5px
}
#nav a:focus {
outline-style: none;
outline-color: invert;
outline-width: medium
}
//#nav a.no-click {cursor: default}
#nav > li > a ,
#nav > li > a.sublevel {padding-right: 4px}
.toplevel#nav > li > a ,
#nav ul.toplevel > li > a {padding-right: 11px}
#nav li a.sublevel ,
#nav > li > a.sublevel {
background-repeat: no-repeat;
background-position: right 50%
}
#nav li:hover > a {
background: #00ff00;
color: white
}
#nav li ul ,
#nav li:hover ul ul ,
#nav li:hover ul ul ul ,
#nav li:hover ul ul ul ul ,
#nav li:hover ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
z-index: 999;
position: absolute;
display: none
}
#nav li:hover ul ,
#nav li li:hover ul ,
#nav li li li:hover ul ,
#nav li li li li:hover ul ,
#nav li li li li li:hover ul ,
#nav li li li li li li:hover ul ,
#nav li li li li li li li:hover ul ,
#nav li li li li li li li li:hover ul ,
#nav li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
display: block;
margin-left: 100%
}
#nav ul ul {margin-left: 0px}
#nav ul {
top: 0px;
left: 0px
}
The sitelog only uses this HTML code,
<body onLoad="loadLog();">
<div style="text-align: center"><b><font color="#00ff00">SITE LOG</b></div>
<br>
<div style="text-align: center;"><textarea rows=30 cols=20 id="log" readonly class="log"></textarea></div>
</body>
And this CSS:
.log
{
background-color: #000000;
border: 2px solid #00ff00;
padding: 5px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
color: #00ff00;
font-size: 10px;
}
Now, if I open my site on IE9, it displays almost well, with the exception that the vertical menu won't expand while on hover, and the site log only loads the first two lines of the text file:
When I run it through Internet Explorer 10 (I have it installed, but for some reason it is greyed out in the IETester), the log loads well, the background loads well, but the vertical menu still doesn't expand when the mouse is hovered inside. Please if anyone could help me to adapt my site I will really appreciate it!!
first, I would recommend visiting http://modern.ie and downloading a free virtual machine for IE 8 to run locally or just use the built in backward compatibility tool in IE to run as IE 8.
Next use the built in debugger to set a breakpoint on your problem and debug from there. You may be accessing DOM properties or using JavaScript that was not a standard in late 2008 and you will need to do some feature detection to make it compatible with IE 8.
Also while you are on modern.ie run your site through the site scan tool to find other potential compatibility issues your site may have with modern web standards. You can just paste the url in the search bar to use the scan tool.