title: magic gap between top and bottom divs in css menu
body: <p><img src="https://i.stack.imgur.com/mcXAL.png" alt="enter image description here"></p>
  
  <p>firefox is the only browser not showing this magic gap. i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution</p>
  
  <p>here is my css menu code here is my css menu code here is my css menu code</p>
  
  <pre><code> #tabs {
        font: bold 11px/1.5em Verdana;
        float:left;
        width:800px;
        height:35px;
        background:#FFFFFF;
        font-size:93%;
        line-height:normal;
        }
      #tabs ul {
      margin:0;
      padding:7px 10px 0 10px;
      list-style:none;
        }
      #tabs li {
        display:inline;
        margin:0;
        padding:0;
        }
      #tabs a {
        float:left;
        background:url("images/tableft14.gif") no-repeat left top;
        margin:0;
        padding:0 0 0 4px;
        text-decoration:none;
        }
      #tabs a span {
        float:left;
        display:block;
        background:url("images/tabright14.gif") no-repeat right top;
        padding:5px 15px 4px 6px;
        color:#666;
        }
      /* Commented Backslash Hack hides rule from IE5-Mac \*/
      #tabs a span {float:none;}
      /* End IE5-Mac hack */
      #tabs a:hover span {
        color:#000;
        }
      #tabs a:hover {
        background-position:0% -42px;
        }
      #tabs a:hover span {
        background-position:100% -42px;
        }
  </code></pre>
  
  <p>This is the css code thats below the menu div</p>
  
  <pre><code>#main-lower {
  
      height: 700px;
      background-color:white;
  
  }
  #specials {
      background-color:#F0F0F0;
      width: 870px;
      height: 100%;
      float: left;
      border:1px solid #e2e2e2;
      -webkit-border-top-left-radius: 10px;
      -webkit-border-bottom-left-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
  }
  </code></pre>
  
  <p>i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution</p>
  
  <p>stright from source code</p>
  
  <pre><code>    &lt;div id="tabs"&gt; 
       &lt;ul&gt; 
  &lt;li&gt;&lt;a href='http://' title=''&gt;&lt;span&gt;New Deals&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='http://' title=''&gt;&lt;span&gt;Liquor&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='http://' title=''&gt;&lt;span&gt;Beverages&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='http://' title=''&gt;&lt;span&gt;General&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='http://' title=''&gt;&lt;span&gt;Fountain Drinks&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
       &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>