title: JQUERY horizontal Menu on IE9
body: <p>I have used the following example of the JQUERY UI horizontal Menu:
  <a href="https://stackoverflow.com/questions/12944364/how-to-make-jquery-ui-nav-menu-horizontal">How to make jQuery UI nav menu horizontal?</a>
  which works great on Chrome
  but in IE 9 it looks horrible and it is not horizontal
  do you have any idea what I have been missing?</p>
  
  <p>my JQUERY sources:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>my css:</p>
  
  <pre><code>#menu li 
  { 
      width: auto;
      clear: none;
      background:blue;
      margin-right:3px;
      margin-left:3px;
      margin-top:2px;
      float: left;
  }
  
  .menuIconItem 
  {
      cursor:hand;
  }
  
  .liMenuItem
  {
      background-color:transparent;
  }
  
  .menu
  {
      border: 0px !important;
      background:D0E1F7 !important;
  }
  </code></pre>
  
  <p>my code:</p>
  
  <pre><code>&lt;ul id="menu" class="menu"&gt;
      &lt;li class="liMenuItem" title="1"&gt;
      &lt;a onclick="menuItemClicked('1');" class="menuIconItem"&gt;
      &lt;img src="1.png" id="img1"&gt;
      &lt;/a&gt;&lt;/li&gt;
      &lt;li class="liMenuItem" title="2"&gt;
      &lt;a onclick="menuItemClicked('2');" class="menuIconItem"&gt;
      &lt;img src="2.png" id="img2"&gt;
      &lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>Thanks :)</p>