Horizontal nav ul displaying vertically in IE8 and below

[Webitseo]

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:

<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:

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!

[Webitseo]

If someone could point me in the direction of a previous post addressing this issue, that would be helpful. I have searched, but didn't find it. I'll try again.

[bchurch]

looks ok in IE8 what's missing?

[Webitseo]

looks ok in IE8 what's missing?

Hmm, that's very strange, because the owner of the site has IE8 and he said the nav is displaying vertically, so I checked it here
http://netrenderer.com/index.php
and here
http://www.my-debugbar.com/wiki/IETester/HomePage

and it does indeed render vertically. Are you sure you're using IE8?

[saranuts]

This happens usually when there is a bug or an error in your html code.
Sometimes an unclosed tag (inside of your navigation codes or even outside of it),
or a redundant closing tag that is not matched with a opener.

So I highly recomend you check your code for a HTML or CSS validation.

[Webitseo]

This happens usually when there is a bug or an error in your html code.
Sometimes an unclosed tag (inside of your navigation codes or even outside of it),
or a redundant closing tag that is not matched with a opener.

So I highly recomend you check your code for a HTML or CSS validation.

Yeah, I did that. No problems.

[tracknut]

At a minimum I would put in the JS shim to allow IE7-8 to deal with those html5 tags (google for html5shiv)

Dave

[Webitseo]

At a minimum I would put in the JS shim to allow IE7-8 to deal with those html5 tags (google for html5shiv)

Dave

Ok, great. Thanks for the tip! I'll check it out.

[Webitseo]

At a minimum I would put in the JS shim to allow IE7-8 to deal with those html5 tags (google for html5shiv)

Dave

Ha ha! The html5 shim/v worked! Woo hoo! Thank you tracknut EVER so much. Geez that made my life easier! Thank you, thank you!