Reputation: 1726

CSS gaps between image links for no reason

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.

Upvotes: 9

Answers (10)

Ahmad AlMughrabi

Reputation: 1970

if you are using xslt to show these element, you should make the following:

<xsl:template match=".//text()">  
    <xsl:value-of select="normalize-space(.)" />
</xsl:template>

Upvotes: 0

henrijs

Reputation: 1010

Best solution to this comes from http://www.cssplay.co.uk/menus/centered.html. And quoting:

All we need to do is enclose the ul tag in an outer container that has a width of 100% and overflow set to hidden.

The <ul> tag is then styled with a relative position and floated left with a left position of 50%.

Finally the <li> tag is also styled with a relative position, floated left but this time with a right position of 50%.

...and that as they say is all that is needed.

Upvotes: 0

luke

Reputation: 31

the gap below images links is due to the image being aligned with base text line by default, you can solve it simply declaring

li img {
    vertical-align:bottom;
}

magic!

Upvotes: 3

Styledev

Reputation: 499

I use the line-height attribute on the li tag to fix this.

ul li { line-height:0; }

Upvotes: 0

graphicdivine

Reputation: 11231

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
}

Upvotes: 6

David Thomas

Reputation: 253506

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; }

Upvotes: 11

Guffa

Reputation: 700910

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

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

Upvotes: 0

animuson

Reputation: 54797

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.

Upvotes: 1