Why does FF wrap content in layer over itself?

[sailingfree]

If you look at this link and compare it between FF and IE, you'll see the content displays ok in IE but in FF the menu titles wrap at the end so the last menu entry (Library) is placed on top of the first one (Home).

I've left the border on the container layer for the menu.

Any clues?

.menu    {
	position: absolute;
	height: 70px;
	width:760px;
	left: 0px;
	top: 10px;
	z-index: 5;
	border: thin solid #000000;
	float: left;
	
}

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

}

#nav a {
	display: block;
	text-decoration: none;	
}

/* TOP LEVEL MENU ITEM */
#nav li   {
	float: left;
	position: relative;
	text-align: left;
	cursor: default;
	width: 10em;

		
}

#nav li a:hover {
	background-color: #DAE5ED;

		
}

#nav li.home {
	float: left;
	position: relative;
	width: 60px;
	height:25px;
	text-align: LEFT;
	cursor: default;
		
}

#nav li.esper {
	float: left;
	position: relative;
	width: 75px;
	height:25px;
	text-align: LEFT;
	cursor: default;
		
}


#nav li.log {
	float: left;
	position: relative;
width: 75px;
height:25px;
	text-align: LEFT;
	cursor: default;

	
}


#nav li.fun {
	float: left;
	position: relative;
width: 75px;
height:25px;
	text-align: LEFT;
	cursor: default;
		
}

#nav li.community {
	float: left;
	position: relative;
width: 100px;
height:25px;
	text-align: LEFT;
	cursor: default;

		
}

#nav li.library {
	float: left;
	position: absolute;
width: 75px;
height:25px;
	text-align: LEFT;
	cursor: default;

}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 0.52em;

}

 

[sailingfree]

Sorry, here's the link:

http://www.spannerheadz.com/newftb/

 

[sailingfree]

IDIOT! The last item was set to 'absolute', not 'relative'.

Do you know how long I've been looking for the solution to this problem? Grrrrr!