Firefox adding margin/padding to layout - firefox

Question

I have some padding and margin "errors" in firefox that I haven't figured out yet.
This is the test page where the screw-ups are happening.
This is the code for the HTML/CSS for the black caption box:
#caption{
position:relative;
display:block;
margin: -4px 0 0 0;
width: 650px;
height:68px;
background-color: black;
}
<div>
<div id="slider2">
<div>
<img src="img/urban.jpg" />
</div>
<div>
<img src="img/urban2.jpg" />
</div>
<div>
<img src="img/urban3.jpg" />
</div>
</div>
<div id="caption"></div>
</div>
This is the schedule code too:
#schedule{
height: 500px;
background-color: #ededed;
padding: 10px 10px 0px 10px;
}
#schedule h2{
text-align: center;
font-family: Arial;
color: rgba(0,0,0,.7);
}
.away{
color: red;
}
.gameline{
border-bottom: 1px solid rgba(0,0,0,.4);
}
.lineup > li{
margin: 0 0 7px 0;
}
#date{
margin: 20px 0 0 0;
list-style:none;
width: 70px;
float:left;
padding-right:30px;
font-family: 'Esteban', serif;
font-family: Arial;
font-weight: bold;
}
#date > .gameline{
border-bottom: 1px dashed rgba(0,0,0,0);
}
#opponent{
margin: 20px 0 0 0;
font-family: 'Esteban', serif;
font-family: Arial;
list-style:none;
}
<div id="right">
<div id="schedule">
<h2>2012 Schedule</h2>
<ul id="date" class="lineup">
<li>APR. 21</li>
<li class="gameline"></li>
<li>SEPT. 1</li>
<li class="gameline"></li>
<li>SEPT. 8</li>
<li class="gameline"></li>
<li>SEPT. 15</li>
<li class="gameline"></li>
<li>SEPT. 22</li>
<li class="gameline"></li>
<li class="away">SEPT. 29</li>
<li class="gameline"></li>
<li>OCT. 6</li>
<li class="gameline"></li>
<li class="away">OCT. 13</li>
<li class="gameline"></li>
<li>OCT. 20</li>
<li class="gameline"></li>
<li class="away">OCT. 27</li>
<li class="gameline"></li>
<li>NOV. 3</li>
<li class="gameline"></li>
<li>NOV. 10</li>
<li class="gameline"></li>
<li class="away">NOV. 17</li>
<li class="gameline"></li>
<li>NOV. 24</li>
</ul>
<ul id="opponent" class="lineup">
<li>Scarlet & Gray Game</li>
<li class="gameline"></li>
<li>Miami(Ohio)</li>
<li class="gameline"></li>
<li>Central Florida</li>
<li class="gameline"></li>
<li>California</li>
<li class="gameline"></li>
<li>UAB</li>
<li class="gameline"></li>
<li class="away">Michigan State</li>
<li class="gameline"></li>
<li>Nebraska</li>
<li class="gameline"></li>
<li class="away">Indiana</li>
<li class="gameline"></li>
<li>Purdue</li>
<li class="gameline"></li>
<li class="away">Penn State</li>
<li class="gameline"></li>
<li>Illinois</li>
<li class="gameline"></li>
<li>BYE</li>
<li class="gameline"></li>
<li class="away">Wisconsin</li>
<li class="gameline"></li>
<li>Michigan</li>
</ul>
</div>

Answer 1

Use a inside your LI (for the date) and style the label instead of trying to put two LIs side-by-side and getting them to match. Set a width and float:left for the label.