title: Ul LI Menu not displaying as Block in IE
body: <p>I have a menu that displays properly in Firefox and Chrome, in IE8 it displays as a vertical list rather than a horizontal menu.</p>
  
  <p>I am not sure why this is not working.
  I have a doctype, and I am linking to the html5 js via google.</p>
  
  <p>Any suggestions would be appreciated.
  Thank you in advance for your time.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#tools {position: absolute; top: -23px; right: 7px; font-size: 0.75em;} 
  #tools li {list-style:none; display: inline-block; padding: 0px 10px; border-left: 1px solid #e8e4d8; line-height: 1; margin: 0;}
  #tools li:first-child {padding-left: 0; border-left: 0;}
  #tools a {color: #e8e4d8; line-height: 1; margin: 0; padding: 0 0 1px 0; display: block; text-decoration: none;}
  #tools a:hover {text-decoration: underline;}
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <p>Note: not sure why but I am having a hard time displaying the <code>div</code> that starts here. so before the <code>ul</code> is a <code>div</code> id "tools"</p>
  
  <pre><code>&lt; div id="tools" &gt;         
  &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
      &lt;li id="last_tool"&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>