IE Menu Issues

L

liunx

Guest
hello all

i got a small issue, i have just built this menu using another menu, i,m using some of the same elemnts, in firefox it works no probs but in IE 6 & 7 explorer i get this problem.

<!-- m --><a class="postlink" href="http://img183.imageshack.us/img183/4719/untitled1jd0.th.jpg">http://img183.imageshack.us/img183/4719 ... jd0.th.jpg</a><!-- m --> (<!-- m --><a class="postlink" href="http://img183.imageshack.us/my.php?image=untitled1jd0.jpg">http://img183.imageshack.us/my.php?imag ... ed1jd0.jpg</a><!-- m -->)

thats the orginal menu <!-- m --><a class="postlink" href="http://solardreamstudios.com/_img/learn/css/cssmenus/index-horiz.html">http://solardreamstudios.com/_img/learn ... horiz.html</a><!-- m -->

my code for the menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"menu.css" />
</head>
<!--[if gte IE 5.5]>
<script language="JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"javascripts/dhtml.js" type="text/javaScript"></script>
<![endif]-->
<body onload="navHover()">
<ul id="navmenu">
<!-- Report menubar item -->
<li id="sub_navmenu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Report ></a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Semester 1 Modules ></a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Lecturor</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tutor</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Lecturor & Tutor</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Semester 2 Modules ></a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Lecturor</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tutor</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Lecturor & Tutor</a></li>
</ul>
</li>
</ul>
</li>
<!-- Question menubar item -->
<li id="sub_navmenu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Questionaire ></a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Questions</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Answers</a></li>
</ul>
</li>
<!-- Exams menubar item -->
<li id="sub_navmenu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Exams ></a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Semester 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Semester 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Results</a></li>
</ul>
</li>
<!-- Add Student menubar item -->
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Add Student</a></li>

<!-- Admin menubar item-->
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Admin</a></li>

<!-- Exit menubar item -->
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Exit</a></li>

</ul>


</body>
</html>


CSS

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px; /*For KHTML*/
list-style: none;
height: 24px;
}

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
background:#000099;
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #000099;
color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #000099;
color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #FF0000;
color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #FF0000;
color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}



JS

navHover = function() {
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis.onmouseover=function() {
this.className+=" iehover";
}
lis.onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

i have included the files as well, can some one tell me why explorer is doing this ACtiveX blocking?

ThanksIf we could see what was wrong it would help
 
You must log in or register to reply here.
Back
Top