<li> Display Inline

Margin set to 0 but gap still there

[Jeigh]

I'm using lists to display a row of images links using the following CSS:

ul.toplinks
{
display:inline;
list-style:none;
list-style-type:none;
margin:0px;
padding:0px;
}
li.toplinks
{
width:173px;
display:inline;
list-style:none;
list-style-type:none;
margin:0px;
padding:0px;
}

And then using:

<ul class="toplinks">
<li class="toplinks">
Image</li>
etc.
etc.

To display them but it is leaving a gap about 3-5px wide between them which is causing it not to fit. How can I get rid of that?

[Marshall]

Try adding

li.toplinks img {
border: 0
margin: 0;
padding: 0;
}

Marshall

[Jeigh]

Thanks for the reply, I tried that but I'm still having the same problem.

[Jeigh]

Decided to use a table and it's working now :)

[Kaylx]

I had the exact same problem and i figured out that the word-spacing attribute was causing my problems. Even though, for example, the link 'Home' is clearly made up of just a single word browsers seem to add spacing to the end of the word anyway despite no other words appearing after the word.

I tried everything just like you did and found a word-spacing of -5px fixed the problem but obviously multiple words ended up 2gether, so i just had to work with it and changed the padding for my horizontal navigation links

#nav_h a
{
padding: 0px 3px/*8px - 5px word spacing*/ 0px 8px;
}

Maybe there's a way to use CSS pseudo-elements to fix it i dunno...

[edited by: Kaylx at 6:07 pm (utc) on Sep. 8, 2007]

[pageoneresults]

How can I get rid of that?

Put the <li>s on one line...

<ul>
<li></li><li></li><li></li>...
</ul>

[Kaylx]

Something so simple fixes it? :O That's such an annoying bug...

[Update] OMG i can't believe that works. So gay...

[edited by: Kaylx at 6:16 pm (utc) on Sep. 8, 2007]

[pageoneresults]

OMG i can't believe that works.

lol! I like my code "in order" and this is one thing that has plagued me for quite some time.

Is there another fix for this other than putting all the <li>s on one line? Anyone? :)

[Jeigh]

I'm the same, always like to keep my code in order. If I'm using a linebreak I always use it like this:

Text Text Text <br />
Text Text Text <br />
Text Text Text <br />

Instead of:

Text Text Text <br />Text Text Text <br />Text Text Text <br />

But thanks for posting that, I'll keep that in mind next time. Probably just stick with the table for now since there's no negative effect of using it really.

[fangslayer]

just make a negative margin