Firfox Display problems with horizontal nav menu

[ecobb]

I'm using the following css for my horizontal navigation menu. I started out with this tutorial:

http://www.htmldog.com/articles/suckerfish/dropdowns/

and I guess somewhere along the way I goofed something up. Everything looks fine in IE, but in FF all of the links are jumlbled on top of each other. I'm sure it's just a small setting somewhere, but for the life of me I can't find it! Can anyone take a look at this and help me figure out why FF won't display the links in a horizontal line?

#nav, #nav ul {
	/* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	text-decoration: none;
	color: Black;
	border: 1px solid gray;
	display: block;
	width: 10em;
	height: 18px;
	padding-top: 2px;
}
#nav a:Hover {
	color : white;
	background-color: #6386B5;
	border: 1px solid Black;
	text-decoration: none;
}
#nav li { /* all list items */
	float: left;
	width: 0em; /* width needed or else Opera goes nuts */
}
#nav li ul {
	/* second-level lists */
	position: absolute;
	text-align: left;
	background-color: #D6D3BD;
	border: 1px solid black;
	border-top: 1px solid white;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul a {
	text-decoration: none;
	color: Black;
	width: 13em;
	border: 1px solid #D6D3BD;
	border-top: 1px solid black;
} 

#nav li ul a:hover {
	color : white;
	background-color: #6386B5;
	border: 1px solid #6386B5 ;
	border-top: 1px solid black;
	text-decoration: none;
} 
#nav li ul ul {
	/* third-and-above-level lists */
	margin: -1.5em 0 0 13em;
}
#nav li ul ul a {
	/* third-and-above-level lists */
	width: 15em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

I have the menu set in an unorderd list, like so:

<ul id="nav">
  <li><a href="">Home</a></li>
  <li style="width: 12px;">-</li>
  <li><a href="">Ad Categories</a>
      <ul>
	 <li><a href="">&nbsp;Announcements</a>
	    <ul>
	        <li><a href="">&nbsp;Garage Sales</a></li>
	        <li><a href="">&nbsp;General Announcements</a></li>
	        <li><a href="">&nbsp;Lost and Found</a></li>
	    </ul>
	</li>
	<li><a href="">&nbsp;Automotive</a>
	    <ul>
	        <li><a href="">&nbsp;ATVs</a></li>
	        <li><a href="">&nbsp;Automotive Accessories</a></li>
	        <li><a href="">&nbsp;Classic Cars</a></li>
	        <li><a href="">&nbsp;Commercial Vehicles</a></li>
	        <li><a href="">&nbsp;Marine</a></li>
	        <li><a href="">&nbsp;Mini Vans/Vans</a></li>
	        <li><a href="">&nbsp;Motorcycles</a></li>
	        <li><a href="">&nbsp;Passenger Cars</a></li>
	        <li><a href="">&nbsp;Pickup Trucks</a></li>
	        <li><a href="">&nbsp;Recreational Vehicles</a></li>
	        <li><a href="">&nbsp;Sports Cars</a></li>
	        <li><a href="">&nbsp;SUVs</a></li>
	    </ul>
	</li>
    <li><a href="">&nbsp;Tickets & Events</a>
	    <ul>
	        <li><a href="">&nbsp;Concert Tickets</a></li>
	        <li><a href="">&nbsp;Other Events</a></li>
	        <li><a href="">&nbsp;Plays & Musicals</a></li>
	        <li><a href="">&nbsp;Sporting Event Tickets</a></li>
	    </ul>
	</li>
     </ul>
  </li>
  <li style="width: 12px;">-</li>
  <li><a href="">Place an Ad</a></li>
  <li style="width: 12px;">-</li>
  <li><a href="">My Account</a></li>
  <li style="width: 12px;">-</li>
  <li><a href="">Contact Us</a></li>
</ul>

Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[Vragabond]

#nav li { /* all list items */
    float: left;
    width: 0em; /* width needed or else Opera goes nuts */
}

Am I completely wrong in assuming that that should be [tt]10em[/tt] and not 0em. Suckerfish has 10em and I can't see any reason why it should be 0. If it is 0, it could cause your FF to stack everything on top of each other and IE to ignore it.

 

[ecobb]

Well, you were right! Thanks for catching that! That worked...sort of. The main menu looks like it's supposed to now, but whenever you hover over it the dropdown menu is way over to the right in IE, and it displays as 2 more horizontal menus in FF instead of a verticle dropdown.

Any ideas or should I just scrap this one and start over?


Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher