Jump to content

CSS Navigation Compatibility Problem


iamglenn
 Share

Recommended Posts

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 by Jonas
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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
 Share

×
×
  • Create New...