Inserting LI elements with jquery look different than hard coded ones

Question

I've got a menu (see example). It has two rows. The upper one is hard coded, the bottom one is inserted with jquery. The problem is, the upper row has some spacing between the LI elements, while the bottom ones doesn't have one. What am I missing?

Example: http://jsfiddle.net/s3rVg/

Answer 1

If you delete the whitespace between the upper list elements [li] the html looses it whitespace as well. Like:

<li class="" onclick="/admin/oink;">Oink</li><li class="" onclick="/admin/super;">Piglet</li>

As this uglifies the html you may also wanna take a look at this discussion. Especially Jon Grant's answer might be an option.

Answer 2

The answer is quite simple:

You inserted a plus space into the two hard coded <li> items.

Look at it here: :)

http://jsfiddle.net/s3rVg/2/

Answer 3

In your CSS you have writen xmargin: 0 5px 0 0 ;, this is invalid and not recognized by the browser. When you just write margin: 0; it will remove the spaces of the li. You should always validate your CSS!

Also you have the same ID twice in your code, but IDs have to be unique to a document.