I hope that someone can help with this because I'm sure that I'm just overlooking something.

I've been re-designing my website a little and it's not quite working properly in IE. The URL is http://www.abovethefold.co.uk/abovethefold_newlayout/


The problem I'm having is with the little bullets (well, acorns) beside the links in the left-hand navigation. In Firefox they display correctly, which means that they display and nothing funky happens when I hover over the links. In IE, the little bullets aren't showing up until I hover over the link and the 'Home' link never gets a bullet. Is this IE being daft or have I done something odd? The annoying thing is that this isn't a section that I've changed and the bullets work perfectly well on the original site: http://www.abovethefold.co.uk/

This is the CSS that I've used:

/* Formatting for links */

a {
text-decoration: none;
font-weight: bold;
}

a:link {
color: #813817;
}

a:visited {
color: #CF5B25;
}

a:hover {
text-decoration: underline;
}

/* Formatting for navigation */

#nav {
list-style: none;
padding: 0;
margin: 0 0 0 25px;
}

#nav li {
background: url(images/acorn01.gif) no-repeat left center;
padding: 7px 5px 7px 35px;
}


If anyone can help, it would be much appreciated.