robin69 Posted January 17, 2006 Share Posted January 17, 2006 hi all i have a website.where i am using css based navigation it works ok in IE but it looks messy in netscape i dont know whats wrong with itbelow are my codes.HTML-------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><!-- saved from url=(0058)http://www.alistapart.com/d/horizdropdowns/horizontal2.htm --><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Horizontal Drop Down Menus</TITLE><META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><script src="drop_down.js" type=text/javascript></SCRIPT><STYLE type=text/css>@import url( style2.css );</STYLE><link href="print.css" rel="stylesheet" type="text/css" media="print"><META content="MSHTML 6.00.3790.0" name=GENERATOR></HEAD><BODY><div><UL id=nav><LI><A href="/home.aspx">Home Page</A></LI><LI><A href="/about_council/aboutcouncil.aspx">About Council</A><UL><LI><A href="hysn.aspx">Hills Youth Services Network</A></LI><LI><A href="directory.aspx">Community Directory</A></LI><LI><A href="youthworker.aspx">Youth Worker Profile</A></LI><LI><A href="skateparks.aspx">Skate Parks</A></LI><LI><A href="centres.aspx">Community Centres</A></LI></UL></LI> </ul></div></BODY></HTML>Stylesheet--------------<style type="text/css">BODY {FONT: 11px verdana}UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; LIST-STYLE-TYPE: none; }UL LI {POSITION: relative}LI UL {DISPLAY: none; LEFT: 149px; POSITION: absolute; TOP: 0px}UL LI A {BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #fff;font-weight:bold;font-family:Verdana, Arial, Helvetica, sans-serif; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 0px solid; TEXT-DECORATION: none;background-color:#0183ae;}HTML UL LI {FLOAT: left; HEIGHT: 1%}HTML UL LI A {HEIGHT: 1%}UL LI A:hover {BACKGROUND: #fff; COLOR: #006699}LI UL LI A {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px}LI:hover UL {DISPLAY: block}LI.over UL {DISPLAY: block}</style>JSCRIPT-----------------// JavaScript DocumentstartList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes;if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } }}}window.onload=startList;some one suggested me its some error in my javascript and gave me following code.startList = function() {if (document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes;if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";}node.onmouseout=function() {this.className=this.className.replace(" over", ""); } }else{ navRoot = document.all["nav"]; ......}}}I dont know how to get this jscript working. please help. because i dont have much knowledge in cross browsers.many thanks in forward.'cheers,Robin Link to comment Share on other sites More sharing options...
johneva Posted January 18, 2006 Share Posted January 18, 2006 I am not really clear on what your problem is is but this section of your code carnt be right you open UL tag twice and you dont close the second LI tag.Then at the end you close the UL tag twice and have an extra LI tag.Saying that you can get away with naf coding like that with HTML.<UL id=nav><LI><A href="/home.aspx">Home Page</A></LI><LI><A href="/about_council/aboutcouncil.aspx">About Council</A><UL><LI><A href="hysn.aspx">Hills Youth Services Network</A></LI><LI><A href="directory.aspx">Community Directory</A></LI><LI><A href="youthworker.aspx">Youth Worker Profile</A></LI><LI><A href="skateparks.aspx">Skate Parks</A></LI><LI><A href="centres.aspx">Community Centres</A></LI></UL></LI></ul> Link to comment Share on other sites More sharing options...
robin69 Posted January 18, 2006 Author Share Posted January 18, 2006 when you hover in About Council the list of links thats under that li will be popped up and javascript initiate that may be you should look at my stylesheet before you jump into conclusion Link to comment Share on other sites More sharing options...
johneva Posted January 18, 2006 Share Posted January 18, 2006 A yep sorry dude my bad. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now