umeshags
01-24-2009, 05:19 AM
Please can anybody tell me why this code is not run on IE.but it run on firefox.
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" hover";
}
node.onmouseout=function() {
this.className=this.className.replace(" hover", "");
}
}
}
}
}
if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;
}
//--><!]]></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}
#cssdropdown li {
float: left;
position: relative;
}
.mainitems{
border: 1px solid black;
background-color: #FFEEC6;
}
.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}
.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: lightyellow;
border: 1px solid black;
}
.subuls li{
width: 100%;
}
.subuls li a{
text-decoration: underline;
}
#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
</style>
</head>
<body>
<ul id="cssdropdown">
<li class="mainitems">
<a href="#">CSS Gallery</a>
<ul class="subuls" style="width: 15em">
<li><a href="#">America</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Russia</a></li>
</ul>
</li>
</ul>
<div id="restofcontent">
<br />
</div>
</body>
</html>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" hover";
}
node.onmouseout=function() {
this.className=this.className.replace(" hover", "");
}
}
}
}
}
if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;
}
//--><!]]></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}
#cssdropdown li {
float: left;
position: relative;
}
.mainitems{
border: 1px solid black;
background-color: #FFEEC6;
}
.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}
.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: lightyellow;
border: 1px solid black;
}
.subuls li{
width: 100%;
}
.subuls li a{
text-decoration: underline;
}
#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
</style>
</head>
<body>
<ul id="cssdropdown">
<li class="mainitems">
<a href="#">CSS Gallery</a>
<ul class="subuls" style="width: 15em">
<li><a href="#">America</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Russia</a></li>
</ul>
</li>
</ul>
<div id="restofcontent">
<br />
</div>
</body>
</html>