Unordered List Spacing problem using CSS between IE and FireFox

I have a problem very similar to this one posted in EE: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_21898314.html?sfQueryTermInfo=1+between+css+how+item+list+reduc+space+unord+us

However, the solution there did not help me.  So here is my problem.

I'm using an unordered list to display menu items.  The menu items are actually graphics and not text.  I have calculated the height of my content based on how high each graphic is.  Each graphic has a small amount of space to provide separation between graphics.  The total height of all my graphics is 602 pixels.  Because of the extra space between the graphics I need to recalculate the height of my content and don't know where the extra space is coming from.  You can see what I'm talking about by going to http://development.sunmedcom.com/BRAIN/DEMO/test.html.  If you open this page in FireFox and IE you will see what I mean.  In FireFox the spacing is what I am expecting but in but in IE there is more spacing.  This example is not using unordered lists.  The next example, http://development.sunmedcom.com/BRAIN/Demo has the graphics in two different DIV tags both defined to be 118px wide.  In IE, both display with the extra space but in FireFox, the unordered list shows with extra space and the one without using unordered lists shows up the way I intended.  

I have been playing around with this for hours and can't seem to get what I want.  If someone can help me get rid of the extra space or tell me how to calculate the total height with the extra space, I would appreciate it.Start Free Trial

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:

TEST.HTML
===========
...
<div id="menu">
<img name="imgname1" src="img/imgname1" border="0" alt="">
<img name="imgname2" src="img/imgname2" border="0" alt="">
...
<img name="imgname19" src="img/imgname19" boder="0" alt="">
</div>
 
INDEX.HTML
============
...
<div id=containter">
<div id="menu">
<ul class="menu-list">
<li><img name="imgname1" src="img/imgname1" border="0" alt=""></li>
<li><img name="imgname2" src="img/imgname2" border="0" alt=""></li>
...
<li><img name="imgname19" src="img/imgname19" border="0" alt=""></li>
</ul>
</div>
</div>
 
CSS
=====
* {  // This is at the top of my CSS file
   margin:0;
}
body {
   font-family:Arial, Helvetica, sans-serif;
   background-color:#dad9ad;
}
#container {
   width:810px;
   height:602px;
   text-align:left;
   border-right-color:#FFFFF;
   margin:5px;
}
#menu {
   width:118px;
   height:inherit;
}
ul.menu-list {
   padding: 0px;
   margin: 0px;
}
.menu-list li{
   margin: 0px;
   padding: 0px;
   list-style-type:none;
   text-align:left;
   vertical-align:text-top;
   border:0px;
   display:block;
}