Different link colours?

[Izzy ♥]

Okay, so in my latest lookup I've tried to make the navigation links a different colour to the normal ones and it does work... but only in Firefox, not IE! Anyone got any suggestions for why this might be, and what I could try to do to fix it?

 

Here's the code I'm using:

</i><style>
table, td {background: transparent;}
#header, #footer, .sidebar, .contentHeader {display: none;}
#main {width: 815px;}
#content {width: 800px; align: center;}
.contentModule,  {border: 0px;}
.contentModuleTable {border: 2px solid #ac8618;}
.contentModuleContent {background-color: #fef0c4;}
.contentModuleHeader, .contentModuleHeaderAlt {background-color: #ac8618; color: #fef0c4;}
body {font:12px verdana; color: #ac8618;}
a:link,a:visited {color: #66cc33;}
a:hover {color: #9dfc3a;}
a.navi {color: #ac8618; font: 20px occidental;}
a:hover.navi {text-decoration: underline;}
div.nav {font: 20px orlando; color: #ac8618;}
div {font-style: normal;}
body {background: #ffffff; background-image: url(http://img513.imageshack.us/img513/994/jellybkgdwz7.gif);}
</style>

<img src="//images.weserv.nl/?url=http://img513.imageshack.us/img513/605/jellybannerxz8.gif" width="800px" height="325px">

<div align="center" class="nav">
<b>
<a href="myaccount.phtml" class="navi">
my account
</a> | 
<a href="petcentral.phtml" class="navi">
pet central
</a> | 
<a href="explore.phtml" class="navi">
explore
</a> | 
<a href="games/arcade.phtml" class="navi">
games
</a> | 
<a href="neoboards/index.phtml" class="navi">
boards
</a> | 
<a href="objects.phtml" class="navi">
shops
</a> | 
<a href="nf.phtml" class="navi">
news
</a> | 
<a href="~iz9piper" class="navi">
lookup by id_24
</a></b></div>	
<br>
<table cellpadding="3" cellspacing="0" border="0" class="contentModuleTable"><tr><td class="contentModuleHeader">About Me</td></tr><tr><td class="contentModuleContent" align="left" valign="top">

TEXT HERE.

</td></tr></table>

 

Thanks!