Images in ul/li creating 3px spacing in IE & Mozilla

I'm wondering if anyone has had this experience before and if you've been able to rectify it.

I'm using an unordered list to create navigation (navigation with images and javascript rollovers - it's for a client that refuses to see the light in using actual text) in IE 6 + Mozilla, the images have mysterious 3px gaps above them, whether Javascript is present in the code or not. In Opera 7, however, everything works fine.

I have removed all spaces between divs, uls and lis in the code, since I read elsewhere that this can fix spacing issues... to no avail.

please see:
http://www.homesteadfounders.com/dev/test/thepreserve.html

my css goes like this:

/* NAVIGATION */
#nav {
position:absolute;
top:228px;
left:0;
padding:0;
margin:0;
border:0;
z-index:10;
}

#nav ul, #nav li {
padding:0;
margin:0;
}

Thanks in advance for your help!