magic gap between top and bottom divs in css menu

Question

enter image description here

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

here is my css menu code here is my css menu code here is my css menu 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;
      }

This is the css code thats below the menu div

#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;
}

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

stright from source code

    <div id="tabs"> 
     <ul> 
<li><a href='http://' title=''><span>New Deals</span></a></li><li><a href='http://' title=''><span>Liquor</span></a></li><li><a href='http://' title=''><span>Beverages</span></a></li><li><a href='http://' title=''><span>General</span></a></li><li><a href='http://' title=''><span>Fountain Drinks</span></a></li> 
     </ul>
    </div>

Kinda need some HTML to really understand the extent of the problem. — Jake, Sep 06 '13 at 22:47
not sure why the html matters but, there you go. @leoMestizo, not going to jsfiddle it, would require i rework the entire code. — Outdated Computer Tech, Sep 07 '13 at 01:02
for a quick test add `*{margin:0;padding:0;border:none;}` at the end of your last css, is it still appearing? — VenomVendor, Sep 07 '13 at 01:48

score 3 · Answer 1 · edited May 23 '17 at 12:30

Quite often you get "mysterious gaps" on lists if you have new lines between the <li> elements.

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Throw them on one line to see if that gets rid of your gap.

<ul><li></li><li></li><li></li></ul>

If that works then this is a duplicate of: Unwanted margin in inline-block list items

Since your gap is below your list you will want to inspect the css display for the item below it and possibly remove lines there as well. But without seeing your html this may not be the issue at all!

For an explanation on why gaps show up on inline elements see here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Excerpt:

This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.

i've updated the html for you. i dont think i have any lines because its just stright php echoing if the tab should exist or not. — Outdated Computer Tech, Sep 07 '13 at 00:58
yea, i read everything here, but it wasn't the problem, i fixed the problem — Outdated Computer Tech, Sep 07 '13 at 01:39

score 1 · Accepted Answer · answered Sep 07 '13 at 01:38

1

Changed the padding top to 8px from 7px ->> padding:8px 10px 0 10px;

yea, i was pretty sure my html had nothing to do with it, and it wasn't a spacing problem cause i'm using php to call my li's

answered Sep 07 '13 at 01:38

Outdated Computer Tech

1,996
4
25
39

1

Just for the record, the reason we wanted your html was so we could see the structure to know how the css would effect the elms. No way to answer your question or fix your problem without all html the css effected. – Mechlar Sep 27 '13 at 21:49

magic gap between top and bottom divs in css menu

2 Answers2