Jump to content

drop down menu via css causes trouble in netscape


robin69

Recommended Posts

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.

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

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

<script language="javascript" type="text/javascript">// JavaScript DocumentstartList = 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>

many thanks in forward.'cheers,Robin[edit] wrapped code in boxes - skemcin

Link to comment
Share on other sites

in your script where it says

if (document.all&&document.getElementById) {
This will only be true in IE5, 5.5, and 6. all other browser will fail and you do not have an else statement to handle other browsers.Try something like this
startList = function() {if (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", "");  }  }else{    navRoot = document.all["nav"];   ......} }}

Link to comment
Share on other sites

in your script where it saysThis will only be true in IE5, 5.5, and 6. all other browser will fail and you do not have an else statement to handle other browsers.Try something like this
startList = function() {if (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", "");  }  }else{    navRoot = document.all["nav"];   ......} }}

Link to comment
Share on other sites

Hi Thanks,I tried that but doesnt help. to me it is not the issue with jscript but with the css. i dont know because the pop up is still displayed even if i dont have else statement its just the navigation menu doesnt show a:link to fixed width thats why i can't actually select the sub menu and it looks pretty in IE and ugly in netscape.please helpthanks in forward.robin
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...