Horizontal List and Font Colors in IE

I am trying to create a simple webpage with a horizontal list as the navigation, but IE (at least IE7) isn't accepting my horizontal list or my font colors. I've got it as inline, but it's still not working. Works great in FF, Safari and Chrome

The website is www.familylegacy2010.com

Here is the applicable CSS and the HTML:

#nav {
		position:relative;
		text-align:right;
		margin-right: 80px;
		margin-top:50px;
		list-style: none;
		}
#nav li {
		display:inline;
		}
#nav li a {
		padding-left: 25px;
		color:#ffffff;
		text-decoration: none;
		font-variant:small-caps;
		font-weight:bold;
		}
#nav li a:hover {
		color: #000000;
		text-decoration: underline;
		}

Code (markup):

<div id="nav">
		<ul>
		<li><a href = "http://www.familylegacy2010.com/banquet.html">the banquet</a></li><li><a href = "http://www.familylegacy2010.com/table.html">reserve a table</a></li><li><a href = "http://www.familylegacy2010.com/zambia.html">about zambia</a></li><li><a href = "http://www.familylegacy2010.com/familylegacy.html">about us</a></li><li><a href = "http://www.legacymissions.org">legacymissions.org</a></li></ul></div>

Code (markup):

 

1) bullets would still be on since you targeted list-style at the DIV and not the UL.

2) Some formatting probably wouldn't hurt.

3) Those full URL's should be unneccessary if it's all being served from the same server, so axe that *** too.

4) There is no reason to even HAVE the div in there if using inline... BUT, inline is MOST of your problem since IE WILL COLLAPSE those - since it's aligned right I'd be really tempted to use floats there - in which case we retain the div...

So... add formatting to the markup and get rid of those stupid long URL's...

<div id="mainMenu">
	<ul>
		<li><a href="/banquet.html">the banquet</a></li>
		<li><a href="/table.html">reserve a table</a></li>
		<li><a href="/zambia.html">about zambia</a></li>
		<li><a href="/familylegacy.html">about us</a></li>
		<li><a href="http://www.legacymissions.org">legacymissions.org</a></li>
	</ul>
</div>

Code (markup):

Then try this for CSS:

/* assumes UL, LI and A are reset */
#mainMenu {
	overflow:hidden;
	width:100%;
	padding-top:50px; 
	font-variant:small-caps;
	font-weight:bold;
	white-space:nowrap; /* make IE 5.x behave on the floats */
}

#mainMenu ul {
	float:right;
	padding-right:80px;
}

#mainMenu li {
	display:inline;
	zoom:1; /* zoomfix for IE6 issue */
}

#mainMenu a {
	float:left;
	padding-left:25px;
	text-decoration:none;
	color:#FFF;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	text-decoration:underline;
	color:#000;
}

Code (markup):

That should do what you want. You MAY still have to throw a width at the UL for IE6, I didn't test that deep.