Question

I am designing a simple joomla template. When I came to a very weird problem. Although, I didn’t gave any margin or padding, some spaces are appearing between the list items.

Here is a link to the fiddle. Click here

Can someone tell me what am i doing wrong?

Firebug shows nothings.

Answer 1

This doesn’t have anything to do with the joomla scenario. But this is default way the inline-blocks behave. They add about 4px margin to the right, automatically.

A quick fix of this is applying float:left to the list items

But, a similar question has been asked already and the answerer has provided with the better solution. i.e. closing and starting the li‘s in a same line

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Furthermore, this might be worth reading as well.