I'm sure this issue has been addressed before, but I couldn't find an answer to help me, and I'm in a bit of a time crunch on this one. I thought the the problem is that IE8 and below don't recognise html5, but even when I took out the html5 tag <nav> and used an id in the <ul>, it still didn't work. Works fine in the other browsers.
The site is currently on a subdomain here:
www.drafts.dreamhosters.com/sams/index.html

The HTML:
Code:
<nav>
  <div class="menu-left"><img src="images/menu-left.gif" alt="" /></div>
    <ul>
<li class="first"><a href="index.html" class="current">Home</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li><a href="boilers-heating-systems.html">Boilers &amp; Heating</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li><a href="powerflushing.html">Power Flushing</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li><a href="london-qualified-plumber.html">Service Areas</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li><a href="plumbing-heating-tips.html">Tips &amp; Hints</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li class="last"><a href="contact-london-plumber.html">Contact</a></li>
</ul> <div class="menu-right"><img src="images/menu-right.gif" alt="" /></div> </nav> <div class="clear"></div>
This is the CSS:
Code:
nav {
	margin:0;
}
nav ul {
	width:710px;
	display:block;
	list-style:none;
	margin:0 0 0 1.3em;
}

nav ul li {
	float:left;
	height:43px;
	display:block;
	background:url(../images/menu-bg.gif);
}
nav ul li.first {
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
nav ul li.last {
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	margin-right:0;
}
.menu-left {
	float:left;
}
.menu-right {
	float:right;
	margin-right:0;
}
nav ul li a {
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	color:#339;
	padding:.5em .95em;
}
nav ul li a:link,
nav ul li a:visited {
	text-decoration:none;
}
nav ul li:hover,
nav ul li:active {
	display:block;
	background:url(../images/menu-act.gif);
}
nav ul li a:hover, .current {
	color:#fff;
}
I really can't figure out the problem. I've used float:left, and even added display: inline-block for good measure, with no luck. I suspect it's the issue of IE calculating the margins and padding differently? But wouldn't that just push the overflow down to the next line, while still remaining horizontal?

I know it's a bit strange, adding an img in between the li's instead of doing a right border. I'm just amending and improving the site while keeping the same basic design of the original. The original is a total trainwreck, visually and code-wise, but at least on that one the nav display properly in IE8! lol

I would sincerely appreciate any help or pointers.

Thanks everyone!