title: Control Height of <li> in IE 7
body: <p>I have a menu built with <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> tags. I want to have small separators between sections. For the separators, I just set a background color and a short height on an <code>&lt;li&gt;</code>. Looks very nice... except in IE7 where the <code>&lt;li&gt;</code> seems to refuse to change its height to be shorter than all the other <code>&lt;li&gt;</code>s in the same <code>&lt;ul&gt;</code>. I have tried different ways of affecting the height of the separator <code>&lt;li&gt;</code> (height, line-height, font-size) with no success. </p>
  
  <p>I have a fix that will leave the separator height as is and color the whole background in IE 7, but that is not really the appearance I want (the separator is too big). Can anyone think of another way to control the height of an <code>&lt;li&gt;</code> tag?</p>
  
  <p>Here is a sample - in IE8 toggling compatibility view will show the problem:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .menu {
      width:100px;
  }
  .menu ul {
      list-style-type:none; 
      border-top: solid 1px red;
      padding: 0px;
      margin:0px;
  }
  .menu ul li {
      border-bottom: solid 1px red;
      padding: 0px;
      margin:0px;
      white-space:nowrap;
  }
  .menu ul li a {
      font-size: 13px;
      text-decoration: none;
      color: black;
      display: block;
      padding: 3px;
  }
  .menu ul li a:hover {
      color: blue;
      text-decoration: underline;
  }
  .menu ul li.separator {
      height:4px;
      background-color:red;
  }
  
  &lt;/style&gt;
  
  &lt;div class="menu"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
    &lt;li class="separator"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>