...

View Full Version : css hover ie (what am I doing wrong)



Mordib
12-12-2005, 01:40 PM
hi, the followin is the code that ive pretty much copied out of a tutorial -



<head>
<title>College for International Citizenship</title>

<style type="text/css">

#navlist p {
font-size: .8em;
}

#navlist a {
display: block;
padding: 2px 2px 2px 24px;
font-weight:bold;
background-color: #000000;
}

#navlist a:link, a:visited {
color: #FFFFFF;
font-weight:bold;
text-decoration: none;
}
#navlist a:hover, a:active {
background-color: #000000;
color: #B4D98C;
}

#uberlink a:link, #uberlink a:visited {
background-color: #FFFFFF;
color: #000000;
}
#uberlink a:hover, #uberlink a:active {
background-color: #B4D98C;
color: #000000;
}

#navlist ul {
padding: 0;
margin: 0;
list-style: none;
}
#navlist li {
float: left;
position: relative;
width: 10em;
}
#navlist li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
#navlist li > ul {
top: auto;
left: auto;
}
#navlist li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="li") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>

<body>
<div id="navlist">
<ul id="nav">
<li><a href="#">Page One</a>
<ul id="uberlink">
<li><a href="#" >second Level menu</a></li>
<li><a href="#" >second Level menu</a></li>
</ul></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
<li><a href="#">Page Five</a></li>
</ul></div>
</body>


it appears to work fine for firefox still but the javascript to get it working with IE doesnt seem to do what its supposed to.

http://www.cfic.org.uk/new05/cic.php


any advice on what im doing wrong would be greatly appreciated. Alternative solutions are also fine, though please explain all steps as im just learning this!

thanks

m.

Mordib
12-12-2005, 02:23 PM
here's another version that does work in IE...sort of.. in this case the drop down bit works but they overlap... I really am nit sure why this one works and the other one doesnt, i have taken the same two tutorials just switched round which I tried to insert into which -



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>College For International Citizenship</title>

<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

a {
display: block;
padding: 2px 2px 2px 24px;
font-weight:bold;
background-color: #000000;
}

a:link, a:visited {
color: #FFFFFF;
font-weight:bold;
text-decoration: none;
}
a:hover, a:active {
background-color: #000000;
color: #B4D98C;
}

ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li { /* all list items */
float: left;
position: relative;
width: 10em;
}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}

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;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#uberlink a:link, #uberlink a:visited {
background-color: #FFFFFF;
color: #000000;
}
#uberlink a:hover, #uberlink a:active {
background-color: #B4D98C;
color: #000000;
}

#content {
clear: left;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<ul id="nav">

<li><a href="">Menu 1</a>
<ul id="uberlink">
<li><a href="">sebmenu11</a></li>
<li><a href="">sumenu12</a></li>
<li><a href="">submenu13</a></li>
<li><a href="">submenu14</a></li>
</ul>
</li>

<li><a href="">Grunts</a>
<ul>
<li><a href="">Smallmouth grunt</a></li>
<li><a href="">Burrito</a></li>
<li><a href="">Pigfish</a></li>
</ul>
</li>

<li><a href="">Remoras</a>
<ul>
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>

</ul>

<div id="content">
hello hello
</div>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum