CSS gaps between image links for no reason

Question

I've been trying to get this horizontal navigation sorted for the past few hours now and nothing is working. I've tried reset.css stylesheets, *{padding: 0; margin: 0) etc. and I still have gaps inbetween my image links.

You see, the navigation is made up of an unordered list of image links displayed inline, but there are gaps in between each image, left, right, top and bottom and I can't see why. It's the same in all browsers.

Here is a link to the page, and so source: Beansheaf Temporary

Link to css: http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css

The rest of the site is obviously still not done, it's just the navigation I'm worried about right now.

Answer 1

To avoid floating the navigation lis, you've got -at least- two options to remove the spaces between inline elements.

<ul> 
  <li><a href="#"><img src="../hotel.jpg" /></a></li 
  ><li><a href="#"><img src="../foodDrink.jpg" /></a></li
  ><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li>
</ul>

Note that the closing </li> tag is closed on the subsequent line (except for the last one), which is valid and maintains readability (for me, at least).

The other option is slightly messier

<ul> 
  <li><a href="#"><img src="../hotel.jpg" /></a></li><!-- 
  --><li><a href="#"><img src="../foodDrink.jpg" /></a></li><!--
  --><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li>
</ul>

And just uses html comments <!-- ... --> to comment-out the spaces that would otherwise be collapsed into a single space.

I do wish there was some way of specifying (for example):

ul li img {whitespace: none-between; }

Answer 2

Another approach, avoiding floats, is to set the font-size on the container to 0, and then re-set it back up for the LIs, like this:

#mainNav
{    font-size: 0}

#mainNav li
{
    display: inline;
    list-style-type: none;
    font-size: 1em
}