Horizontal navigation not working in IE looks good in FF and Chrome

I've been looking at the css code for quite a while and have tried many times to get this page: http://appraisalline.com/chicagoappraisals/ to render correctly in IE but to no avail. The css code I'm trying to solve for is this:

nav {
padding: 0px 0px 3px 0px;
width: 100%;
height: 50px;
overflow: hidden;
}

nav ul {
background: url(../images/nav-li-bg.gif) right top no-repeat;
height: 50px;
overflow: hidden;
float: left;
}

nav ul  li {
font-size: 13px;
line-height: 24px;
float: left;
background: url(../images/nav-li-bg.gif) 0 0 no-repeat;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left: -2px;
}

nav ul li a {
color: #fff;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-transform: uppercase;
position: relative;
font-weight: bold;
margin: 0 0px 0 0;
}

nav ul li a span {
background: none;
display: inline-block;
padding: 0px 6px 0 6px;
}

nav ul li a span span {
background: none;
padding: 13px 17px 13px 16px;
}

nav开发者_运维技巧 ul li a:hover, nav .active {
background:url(../images/nav-left.gif) left top no-repeat;
color:#fff;
}

nav ul li a:hover span, nav .active span {
background:url(../images/nav-right.gif) right top no-repeat;
}

nav ul li a:hover span span, nav .active span span {
background:url(../images/nav-tail.gif) 0 0 repeat-x;
}

nav .first {margin: 0;}

Any and all help for why this is not rendering is appreciated. Thanks!

---

You're trying to style HTML5 elements (in this case the nav element) that versions of IE before IE9 don't understand. Use an html5 shim if you feel you have to style those elements:

http://code.google.com/p/html5shim/

A better solution in the short term, in my view, is not to style the new elements directly, but rather style other elements and just use the HTML5 elements for semantic structure. What the shim is doing is creating the elements using javascript which then allows css rules to be applied to them in browsers that don't understand the elements.

---

First thing that jumps out at me is that you are using the HTML5 nav tag which is certainly not going to work in older versions of IE. Works fine in IE9.

It would probably be easiest to simply use divs for backward compatibility if you care about IE.