IE breaking navigation menu with search

Question

I have a standard NAV menu created with UL and LI elements. Now on Chrome, Firefox and the newer/newest version of Internet Explorer it all looks fine, but try IE7 (and probably 8) and the search on the right drops down below the home button. While I know my code works for all the latest versions of browsers, I don't know what CSS to give my navigation menu to fix this, if the user is using an older version.

I've included the HTML and CSS below and a screenshot of the correct style, conditional statements I know about, but the actual appropriate code to get my navigation to style properly for older versions of IE is what I'm after.

Live URL - http://bit.ly/1gC4JiA

UPDATE This is what my client see's (he's using bloody IE8 and won't update):

<nav>
      <ul>
        <li>
            <a href="/"><i class="fa fa-home"></i></a>
        </li>
                                    <li>
                <a href="#">Felt Bags</a>
                    </li>
                                    <li>
                <a href="#">Felt Accessories</a>
                    </li>
                                    <li>
                <a href="#">Canvas Collection</a>
                    </li>
                                    <li>
                <a href="#">Gadget Carriers</a>
                    </li>
                                    <li>
                <a href="#">Laptop Backpacks</a>
                    </li>
                                    <li>
                <a href="#">Travel Bags</a>
                    </li>
                    <li>
            <input type="text" value="" placeholder="Search" name="search" class="header-search" style="width: 120px;">
            <span class="button-search"></span>
        </li>
      </ul>
    </nav>

CSS

    /* Navigation Menu */

nav {
    font-size: 1.3em;
    margin-top: 40px;
    width: 990px;
}

nav ul li {
    display: inline;
    background: #929292; /* Old browsers */
    background: -moz-linear-gradient(top,  #929292 0%, #383838 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(99%,#383838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #929292 0%,#383838 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #929292 0%,#383838 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #929292 0%,#383838 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #929292 0%,#383838 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#929292', endColorstr='#383838',GradientType=0 ); /* IE6-9 */
    padding: 10px 8px 10px 8px;
    color: #fff;
    font-weight: bold;
    border-right: 1px solid #343434;
    border-left: 1px solid #8e8e8e;
}

nav ul li:hover, nav ul li.active {
    display: inline;
    background: #383838; /* Old browsers */
    background: -moz-linear-gradient(top,  #383838 1%, #929292 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#383838), color-stop(100%,#929292)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #383838 1%,#929292 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #383838 1%,#929292 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #383838 1%,#929292 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #383838 1%,#929292 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383838', endColorstr='#929292',GradientType=0 ); /* IE6-9 */
    padding: 10px 8px 10px 8px;
    color: #fff;
    font-weight: bold;
}

nav ul li:first-child {
    border-top-left-radius: 5px;
    padding-top: 10px;
    background: #929292; /* Old browsers */
    background: -moz-linear-gradient(top,  #929292 0%, #383838 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(99%,#383838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #929292 0%,#383838 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #929292 0%,#383838 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #929292 0%,#383838 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #929292 0%,#383838 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#929292', endColorstr='#383838',GradientType=0 ); /* IE6-9 */
    padding: 10px 11px 10px 11px;
    color: #fff;
    font-weight: bold;
    border-right: 1px solid #343434;
    border-left: 1px solid #8e8e8e;
}

nav ul li:last-child {
    border-top-right-radius: 5px;
    border-right: none;
    padding-right: 85px;
    padding-left:72px;
    background: #929292; /* Old browsers */
    background: -moz-linear-gradient(top,  #929292 0%, #383838 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(99%,#383838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #929292 0%,#383838 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #929292 0%,#383838 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #929292 0%,#383838 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #929292 0%,#383838 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#929292', endColorstr='#383838',GradientType=0 ); /* IE6-9 */
}
nav ul li a,nav ul li a:hover,nav ul li a:active,nav ul li a:visited{color:#fff; text-decoration: none;}
nav ul li i {
    font-size: 1.5em;
}

Answer 1

Try this to IE8

nav {
  font-size: 1.3em;
  margin-top: 40px;
  width: 990px;
  display: table\9; // add this
  margin-bottom: 5px\9; // add this
  // Hack to IE8 (using \9)
}

Answer 2

dispaly your nav element as a block level element, since as you know, the element does not exists in IE and when it is created by javascript, by default it is displayed as inline level element

nav {

   display:block;

   font-size: 1.3em;
   margin-top: 40px;
   width: 990px;
}

And, do not forget, create the nav element for IE ´8 and lower.

<!--[if lte IE 8]>
  <script>
    document.createElement("nav");
  </script>
<![endif]-->