title: LI height same as UL
body: <p>Hi I am wondering how come my UL is 38px height yet the LI does not fit 100% height.</p>
  
  <pre><code>ul#ordermenu{
      height:38px !important;
      width:100% !important;
      line-height:38px;
  }
  
  ul#ordermenu li
  {
  height:38px !important;
  display: inline;
  list-style-type: none;
  padding-right: 100px;
  color:#000;
  line-height:38px;
  font-size:20px;
  }
  
  ul#ordermenu li:last-child {
      padding-right:-100px;
  }
  ul#ordermenu li.active
  {
  height:38px !important;
  line-height:38px;
  background: #e6f0a3; /* Old browsers */
  background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
  
  }
  </code></pre>
  
  <p>My HTML code</p>
  
  <pre><code> &lt;ul id="ordermenu"&gt;
          &lt;li class="active"&gt;Items&lt;/li&gt;
          &lt;li&gt;Checkout Status&lt;/li&gt;
          &lt;li&gt;Postage Details&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>