Very strange IE issue

[azadcreative]

Hi,

I have been pulling my hair off for the last 2 days because of this frustrating IE issue.

The website in question is http://www.clubwebsite.co.uk

If you navigate to the News & Updates section (http://www.clubwebsite.co.uk/news/) you will see Facebook and Twitter links on the right hand side of the navigation.

Things work perfectly in Firefox and IE (both 7 and 8).

The facebook/twitter links are a simple UL positioned with CSS.

The problem is that, if I add the same markup to the front page, it breaks the entire page in IE 7/8.

Here is the markup:

<div id="header">
<a href="http://www.clubwebsite.co.uk">
<img id="branding" src="!COMMUNITY_RESOURCE_PATH!/images/clubwebsite.png" alt="Club Website" />
</a>

<ul id="navigation">
<li><a href="/">home</a></li>
<li><a href="/community/tour/club/">club website</a></li>
<li><a href="/community/tour/league/">league website</a></li>
<li><a href="/news/">news &amp; updates</a></li>
<li><a href="/community/newsletter/">newsletter</a></li>
<li><a href="/community/competition/">competitions</a></li>
<li><a href="/community/lucozade/">lucozade sport</a></li>
</ul>

<ul id="social">
<li><a href="http://www.facebook.com/pages/Club-Website/125698504812" target="_blank"><img src="!COMMUNITY_RESOURCE_PATH!/images/nav_facebook.png" alt="Facebook" /></a></li>

<li><a href="http://twitter.com/clubwebsite" target="_blank"><img src="!COMMUNITY_RESOURCE_PATH!/images/nav_twitter.png" alt="Twitter" /></a></li>
</ul>

<div class="clear"></div>
</div>

It is the ul#social that causing the problem. What amazes me is that its working on the News section but the same markup breaks the front page (and all other pages)

FYI, the News section is running on Wordpress and the rest of the site is a custom CMS.

Any help would be greatly appreciated.