title: IE8 background-color hiding borders
body: <p>I am trying to add borders to navigation items. The background color is grey, and three of the borders are a lighter grey. The right border is black. On IE8, none of the borders show.</p>
  
  <p>Here is how the <code>&lt;li&gt;</code> look in IE9:
  <img src="https://i.stack.imgur.com/fdAv7.png" alt="enter image description here"></p>
  
  <p>Here is how they look on IE8:<br>
  <img src="https://i.stack.imgur.com/b8xog.png" alt="enter image description here"></p>
  
  <p>And when I remove the <code>background-color</code> attribute, this is what shows up on IE8:
  <img src="https://i.stack.imgur.com/v8L2q.png" alt="enter image description here"></p>
  
  <p>It seems like the background color is obscuring the borders. How can I fix this?</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;ul class="mainMenu"&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.mainMenu &gt; li{
      border: 1px solid black;
      position: relative;
      display: table-cell;
      background-color: #363636;
      border-top: 1px solid #666;
      border-left: 1px solid #666;
      border-bottom: 1px solid #666;
      background-image: linear-gradient(#363636 50%, #000 50%);
      background-image: -webkit-linear-gradient(#363636 50%, #000 50%); 
      background-image: -moz-linear-gradient(#363636 50%, #000 50%);
      background-image: -ms-linear-gradient(#363636 50%, #000 50%);
      background-image: -o-linear-gradient(#363636 50%, #000 50%);
  }
  </code></pre>
  
  <p>EDITED: I mistakenly had a <code>div</code> instead of an <code>ul</code> surrounding my list items. On IE8 with the list items in an <code>ul</code>, this problem shows up.</p>