IE margin alignment problem

Hi guys, i’m hoping someone can help with this.

In firefox the navigation links at the top right are correctly aligned flush to the edge of the image below it. But in IE there seems to be a 20px gap which looks slightly odd.

Can anyone suggest a fix for this?

Thanks.

[URL=”http://www.cnsdemo4.co.uk/enjoy/”]site here [/URL]

[code=html]<div id=”header”>
<ul>
<li><a href=”index.html”>HOME</a></li>
<li>THE FACTS</li>
<li>CHARITIES</li>
<li>CONTACT US</li>
</ul>[/code]

CSS

[code=html]
#wrapper #header ul {
padding-top: 144px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 270px;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
padding-left: 0px;
}

#wrapper #header ul li {
float: left;
color: #FAB91D;
list-style-type: none;
display: inline;
position: relative;
padding-top: 0px;
padding-right: 18px;
padding-bottom: 0px;
padding-left: 4px;
margin: 0px;
background-image: url(images/dot.jpg);
background-repeat: no-repeat;
background-position: right;
}
[/code]

Also in #CSS _↴