Navigation Bar Displaying Differently In Browsers

I'm ok with the basics of html and css, but and fairly new to it, so have been stumped by this latest problem. I built a site [URL] about a year ago, and am fairly sure that it worked perfectly in all browsers at the time. However, I've just checked it and have noticed that the last option on the navigation bar at the top ('noticeboard') seems to have disappeared in IE. It's still displaying perfectly in Firefox and Chrome however.

The html for that section is:
<div style="top: 0px; left: 0px" id="header">
<div style="text-align: center; top: 34px; right: 75px" id="menu">
<ul id="navigation">
<li class="active"><a href="index.htm"><span>HOME</span></a></li>
<li><a href="callington_LFC_fixtures.htm"><span>FIXTURES</span></a></li>
<li><a href="callington_LFC_reports.htm"><span>REPORTS</span></a></li>
<li><a href="callington_LFC_photos.htm"><span>PHOTOS</span></a></li>
<li><a href="callington_LFC_players.htm"><span>PLAYERS</span></a></li>
<li><a href="callington_LFC_contact.htm"><span>CONTACT</span></a></li>
<li><a href="callington_LFC_noticeboard.htm"><span>NOTICE BOARD</span></a></li>
</ul></div></div>

If you visit the site in different browsers you'll see what I mean. This time it's working fine in IE, but not in Firefox or Chrome (I feel like tearing my hair out!). The problem is with the very bottom section on the page. The alignment is all out. The html reads:
<div><img alt="" src="images/right_bottom.png" /></div></div><br clear="all" />
<center><img style="width: 552px" alt="" vspace="3" width="552" src="images/hr.gif" /></center></div></div>
<div id="footer"><a href="callington_LFC_contact.htm">Contact</a>|<a href="index.htm">Home</a>| <a href="callington_LFC_links.htm">Links</a>|<a href="callington_LFC_map.htm">Map</a>|<a href="callington_LFC_sitemap.htm">Sitemap</a> </div></div>
<div id="bottom"><br /> .....