magic gap between top and bottom divs in css menu - html

Question

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>

Answer 1

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.

Answer 2

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