unwanted space in CSS menu

[jast76]

Hello everyone,

I have created a horizontal menu in css using <ul><li>. All of which each <li> is an image for the link. The problem that I am having is that when I get every thing together there is a space between each image, but the images need to be butted right next to each other with no space for the layout that I have created. How would i go about removing this unwanted space between each image?

Here is the code that I have:

/* Menu Start */
#menu {
position:absolute;
left:75px;
top:24px;
width:656px;
height:34px;
z-index:4;
visibility:visible;
vertical-align: top;
}
#menu ul {
display: inline;
margin: 0px;
padding: 0px;
border: none;
inline-style: none;
white-space: nowrap;
}
#menu li {
margin-left: 0;
display:inline;
padding-left: 0;
padding-right: 0;
border: none;
}
#menu ul li {
margin-left: 0;
padding-left: 0;
border: none;
list-style: none;
display: inline;
}
ul.menu>li{
float: left;
position:relative;
}
#menu li a{
padding:0px;
}
/* Menu End */

<div id="menu">
<ul>
<li><a href="#"><img name="test_r2_c2" src="test_r2_c2.gif" width="66" height="34" border="0"></a></li>
<li><img name="test_r2_c3" src="test_r2_c3.gif" width="12" height="34" border="0"></li>
<li><a href="#"><img name="test_r2_c4" src="test_r2_c4.gif" width="124" height="34" border="0"> </a></li>
<li><img name="test_r2_c5" src="test_r2_c5.gif" width="18" height="34" border="0"></li>
<li><a href="#"><img name="test_r2_c6" src="test_r2_c6.gif" width="109" height="34" border="0"></a></li>
<li><img name="test_r2_c8" src="test_r2_c8.gif" width="16" height="34" border="0"></li>
<li><a href="#"><img name="test_r2_c9" src="test_r2_c9.gif" width="72" height="34" border="0"></a></li>
<li><img name="test_r2_c10" src="test_r2_c10.gif" width="11" height="34" border="0"></li>
<li><a href="#"><img name="test_r2_c11" src="test_r2_c11.gif" width="75" height="34" border="0"></a></li>
<li><img name="test_r2_c12" src="test_r2_c12.gif" width="11" height="34" border="0"></li>
<li><a href="#"><img name="test_r2_c13" src="test_r2_c13.gif" width="142" height="34" border="0"></a></li>
</UL>
</div>

[edited by: swa66 at 10:07 am (utc) on Oct. 20, 2008]
[edit reason] snipped escaped personal URL [/edit]

[essiw]

#menu li {
margin: 0;
display:inline;
padding: 0;
border: none;
}

could maybe fix it

also what is your doctype?

[swa66]

inline elements get spaces think of them as words on a lie of text, try floating the elements instead.

[jast76]

Thanks for the help both of you. As for what essiw mention that I should try I had tried that once and that did not work unfortunately. As for what swa66 mention with floating I did add float: left to the #menu li and guess what it worked. Again thanks for the help.

Jake