Navigation bar spacers and gaps

[rctneil]

Hi,

I have a ul as a navigation bar.

I ahve it set out horizontal using display: inline-block.

Two issues I could do with some help with:

1.) How do I remove the gap between each li?

2.) If I want to add " | " after each li except the last one how would I do that?

I have the following to add the pipe in between but not sure how to get rid of the last one?

#nav li:after
{
content: '|';
}

Thanks

[Stevie D]

I have a ul as a navigation bar.
...
1.) How do I remove the gap between each li?

2.) If I want to add " | " after each li except the last one how would I do that?

I have the following to add the pipe in between but not sure how to get rid of the last one?

#nav li:after
{
content: '|';
}

1. Without seeing what you've got so far, it's hard to be sure, but it sounds like you need to reduce padding and/or margins on the list item and/or the list itself.

2. If you want a cross-browser solution, the easiest one is to just put an ID on the last item and then put :after {content:none;} on that ID.

[noonnope]

http://www.sitepoint.com/forums/css-...st-706576.html

the previous problem:
making a block element an inline-block element was causing a right whitespace to appear. that was from the whitespace in the actual markup. so, no whitespace between the end tag and the start tag of between elements fixed it (...</div><div>..., no new line or spaces there).