I am using the following to center list items inside an unordered list:

        <div id="navigation">
            <ul>
                <li>Home</li>
                <li>Schedule</li>
                <li>Tickets</li>
                <li>News</li>
            </ul>
        </div><!-- navigation -->

#navigation {
    padding: 3px 3px 5px 3px;
}
#navigation ul {
    list-style-type: none;
    text-align: center;
}
#navigation ul li {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    padding: 3px 10px;
    border: 1px solid green;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
}

The problem is, in the latest versions of ff, sf, ie8, op and chrome the list items have a right and left margin like so:



I can't figure out why this is, there is no margin being added to the list items in the css. Can a fresh pair of eyes see
the problem and figure out a possible solution?

I should mention, that it works as it should in internet explorer 7 (this is how I need it to be in the other browsers as well):



UPDATE: adding margin: 0 to the li style doesn't work.

Some elemets have margin: x by default. Try add margin:0; in the #navigation ul li {.

Sorry, I should have mentioned. The first thing I tried was adding margin: 0 to the li style and it had no effect on it.

So - lets see the problem page or post ALL of your code.

Originally Posted by LadynRed

So - lets see the problem page or post ALL of your code.

That is all my code

I am just trying to get this navigation to work right on an otherwise empty page. So any conflict with other styles isn't a possibility.

Remove the spaces between you <li> items in your html -- like this:

<li>Home</li><li>Schedule</li><li>Tickets</li><li>News</li>

Spaces go away. Seems stupid that those spaces matter.. but that is not at all uncommon.

Originally Posted by LadynRed

Remove the spaces between you <li> items in your html -- like this:

<li>Home</li><li>Schedule</li><li>Tickets</li><li>News</li>

Spaces go away. Seems stupid that those spaces matter.. but that is not at all uncommon.

He he, that did it. I never encountered this before, that putting html on a second line will cause any difference on the front end. You learn something new everyday, thanks LadynRed!