CSS Navigation Compatibility Problem

[iamglenn]

I am having some trouble with the code I recieved from here: http://www.htmldog.com/articles/suckerfish...e/vertical.htmlMy navigation works correctly in ie, but in firefox it overlaps, thanks in advance for your consideration.

<style>	body {  font-family: Arial, Helvetica, sans-serif;	}	#nav, #nav ul { /* all lists */  padding: 0;  margin: 0;  list-style: none;  float: left;  width: 10.00em;	}	#nav li { /* all list items */  float: left;  line-height: 1.75em;  margin-bottom: -2px;  width: 10.00em;	}	#nav li ul { /* second-level lists */  position: absolute;  left: -999em;  margin-left: 10.15em;  margin-top: -1.75em;	}	#nav li ul ul { /* third-and-above-level lists */  left: -999em;}	#nav li a {  width: 13.50em;  display: block;  color: white;  font-weight:bold;  text-decoration: none;  background-color: #000086;  padding: 0 0.5em;  font-size: 12px;}#nav a.daddy {	background: url(rightarrow2.gif) right no-repeat;	background-color: #000086;	}	#nav li a:hover {  color: white;  background-color: #466ca2;	}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {  left: -999em;	}	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */  left: auto;	}</style><script type="text/javascript">sfHover = function() {		var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {  sfEls[i].onmouseover=function() {  	this.className+=" sfhover";  }  sfEls[i].onmouseout=function() {  	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");  }	}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script></head><ul id="nav">	<li><a href="index.html">Home</a>	<li><a href="company.html" class="daddy">Company Overview</a>  <ul>  	<li><a href="history.html">History</a>  	<li><a href="partnership.html">Partnership Philosophy</a>  	<li><a href="industry.html">Industry Knowledge</a>  	<li><a href="privacy.html">Privacy Policy</a>  	<li><a href="financial.html">Financial Alternatives</a>  	<li><a href="testimonials.html">Testimonials</a>  	<li><a href="directions.html">Directions/Map</a></ul>      </li>    		<li><a href="products.html" class="daddy">Products & Solutions</a>  <ul>  	<li><a href="overview.html">Overview</a>  	<li><a href="mbscore.html">MBS Core Software</a>  	<li><a href="mbsdocument.html">MBS Document Imaging</a>  	<li><a href="check.html">Check Image System</a>  	<li><a href="it.html">IT Security Solutions</a>  	<li><a href="optional.html" class="daddy">Optional Software</a>  	<ul>  	<li><a href="third.html">Third Party Vendors</a>  	</ul>  	<li><a href="asset.html">Asset/Liability Managment</a>  	<li><a href="profit.html">Profit Planner/Budgeting</a>  	<li><a href="platform.html">Platform Banking</a>  	<li><a href="network.html">Network Solutions</a>  	<li><a href="archive.html">Archive Storage</a>  	<li><a href="database.html">Database Query & Reporting</a>   </ul>  </li>  <li><a href="support.html">Support Center</a>  <li><a href="educational.html" class="daddy">Education Oppurtunities</a>  <ul>  	<li><a href="mbsonline.html">MBS Online University</a>  	<li><a href="training.html">Training Meetings</a>    </ul>  </li>  <li><a href="news.html" class="daddy">News /Events /Caldendar</a>  <ul>  	<li><a href="press.html">Press Releases</a>  	<li><a href="trade.html">Trade Shows and Conferences</a>  	<li><a href="seminars.html">Seminars</a>  	<li><a href="directions.html">Directions/Map</a>    </ul>  </li>    	  <li><a href="careers.html">Careers</a>  </li>      <li><a href="contact.html" class="daddy">Contact Center</a>  <ul>  	<li><a href="request.html">Request Information</a>  	<li><a href="update.html">Update Bank Profile</a>    </ul>  </li>  	</ul>

Here is a direct link to the navigation live as well: http://iamglenn.com/nav/Thank you in advance again!-Glenn

Edited April 23, 2006 by Jonas

[Little Goat]

well, first, I visited your site, and you have an ending tag for head, without even starting it. you also need an <html> element, and a <body> tag.LG

[iamglenn]

I fixed that part, my mistake. I know that it is something with the width's but everytime I change one to fix a browser, the other browser will not work correctly. Thanks for the quick reply, hopefully I can get this fixed!Thank you thank you!

[johneva]

You need to adjust your margin-left in this bit. I found 10.85 worked about right.

<?xml version="1.0" encoding="iso-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Example</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body { font-family: Arial, Helvetica, sans-serif;}#nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; float: left; width: 11.00em;}#nav li { /* all list items */ float: left; line-height: 1.75em; margin-bottom: -2px; width: 11.00em;}#nav li ul { /* second-level lists */ position: absolute; left: -999em; margin-left: 10.15em; margin-top: -1.75em;}html>body #nav li ul {  /* IE hack for margin */ margin-left: 10.85em;}#nav li ul ul { /* third-and-above-level lists */ left: -999em;}#nav li a { width: 13.50em; display: block; color: white; font-weight:bold; text-decoration: none; background-color: #000086; padding: 0 0.5em; font-size: 12px;}#nav a.daddy {background: url(rightarrow2.gif) right no-repeat;background-color: #000086;}#nav li a:hover { color: white; background-color: #466ca2;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto;}</style><script type="text/javascript">sfHover = function() {var sfEls = document.getElementById("nav").getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() {  this.className+=" sfhover"; } sfEls[i].onmouseout=function() {  this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); }}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script></head><body><ul id="nav"><li><a href="index.html">Home</a><li><a href="company.html" class="daddy">Company Overview</a> <ul>  <li><a href="history.html">History</a>  <li><a href="partnership.html">Partnership Philosophy</a>  <li><a href="industry.html">Industry Knowledge</a>  <li><a href="privacy.html">Privacy Policy</a>  <li><a href="financial.html">Financial Alternatives</a>  <li><a href="testimonials.html">Testimonials</a>  <li><a href="directions.html">Directions/Map</a></ul>      </li>   <li><a href="products.html" class="daddy">Products & Solutions</a> <ul>  <li><a href="overview.html">Overview</a>  <li><a href="mbscore.html">MBS Core Software</a>  <li><a href="mbsdocument.html">MBS Document Imaging</a>  <li><a href="check.html">Check Image System</a>  <li><a href="it.html">IT Security Solutions</a>  <li><a href="optional.html" class="daddy">Optional Software</a>  <ul>  <li><a href="third.html">Third Party Vendors</a>  </ul>  <li><a href="asset.html">Asset/Liability Managment</a>  <li><a href="profit.html">Profit Planner/Budgeting</a>  <li><a href="platform.html">Platform Banking</a>  <li><a href="network.html">Network Solutions</a>  <li><a href="archive.html">Archive Storage</a>  <li><a href="database.html">Database Query & Reporting</a>  </ul> </li> <li><a href="support.html">Support Center</a> <li><a href="educational.html" class="daddy">Education Oppurtunities</a> <ul>  <li><a href="mbsonline.html">MBS Online University</a>  <li><a href="training.html">Training Meetings</a>   </ul> </li> <li><a href="news.html" class="daddy">News /Events /Caldendar</a> <ul>  <li><a href="press.html">Press Releases</a>  <li><a href="trade.html">Trade Shows and Conferences</a>  <li><a href="seminars.html">Seminars</a>  <li><a href="directions.html">Directions/Map</a>   </ul> </li>     <li><a href="careers.html">Careers</a> </li>     <li><a href="contact.html" class="daddy">Contact Center</a> <ul>  <li><a href="request.html">Request Information</a>  <li><a href="update.html">Update Bank Profile</a>   </ul> </li>  </ul><body></body></html>

Also I put the CSS in its own external file and also do the same for the javascript too.Hope that sorted ya out.

[iamglenn]

Thanks! Everything is somewhat working now but it seems that now I have a giant blue box on the right hand side of the navigation in ff. url here: http://www.modernbanking.com

[johneva]

HiRight I see what your saying.This must be something to do with the rest of the pages coding though as it works fine if you use the coding I gave you on a clean page with nothing else on it.I dont know why it is doing it though sorry.I dont use tables at all for layout so carnt say for sure, but I would say it has got to be something to do with using tables at a guess cos there aint much else for the rest of the page.To be fair I am supprised you are using the suckerfish menu when the rest of the site is using such old coding methods, tables should not be used for layout and all your styles should be in CSS not in with you HTML/XHTML.I would probley suggest looking into redoing it using CSS but one of the others maybe able to tell you just why it is doing what it is, but I carnt I am quite new myself.Thanx John

[iamglenn]

Thanks John,I was hired for just the navigation alone, I will keep digging at it, thanks everyone for their help!take care-Glenn.