Justified CSS menu not working without line breaks between <li>

To answer your question, that's how xHTML works.If you have the following:

<a href="#">test</a><a href="#">test1</a>

That would show up as

testtest1

And if you have the following:

<a href="#">test</a> <a href="#">test1</a>

That would show up as

test test1

Now, the same logic works for <li> elements, as well as various other selectors such as <img> selectors.

Have you have had a header with three images in a line, but when you tried to do this:

 <img src="#" /> <img src="#" /> <img src="#" />

That will insert a space ( ) after each image, whereas having them in line would not.

Your function accomplishes exactly what you wanted. You could've done it using Javascript or CSS as well, but your solution is better. Just in case you are curious, here is how to do it with CSS:

.menu li:before {    content:' ';}

Hope that helped.

instead of display:inline, try floating your lis left. then maybe:
no:

.menu * {   display: inline;}

instead

.menu li{   float:left;   padding:0 5px;   list-style:none;}

I guess i kind of embelished with the other stuff but give it a try!

If I understand it correctly - what you really need is a tabular layout.Try adding this to the css:

.menu { display: table; }.menu ul { display:table-row; }.menu li { display:table-cell; }