CSS gaps between image links for no reason

Question

Hi,

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.

Thanks in advance,

infiniti fizz

Answer 1

Try removing all spaces and line-breaks between the li elements.

Because you are displaying them inline, spaces in the HTML will act as if they were a space in inline text and cause a gap to be left when rendering.

Answer 2

Add

#mainNav li { 
  float:left;
}

to your CSS.

Answer 3

It is because a new line in an HTML document will be interpreted as a space in the printed content. Since all of your 'li' elements are on new lines, it is adding a space between each of them. Make sure you display them as block elements and float them to the left so they run evenly together.

Answer 4

You can float the list elements, then the white space doesn't interfer:

#mainNav li
{
 float: left;
 list-style-type: none;
}

Answer 5

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 6

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
}