Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css hover ie (what am I doing wrong)

    hi, the followin is the code that ive pretty much copied out of a tutorial -

    Code:
    <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.

  • #2
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 -

    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •