Question

I am making one simple horizontal menu with CSS and simple unordered list. The HTML of the menu is following:

<div id="navigation">
    <div id="nav-holder">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

And CSS is as follows:

#navigation
{
    display: table; 
    height: 35px; 
    width: 100%;
    #position: relative; 
    overflow: hidden;
    background: Black;
}

#nav-holder
{
    #position: absolute; 
    #top: 50%;
    display: table-cell; 
    vertical-align: middle;
}

#navigation ul
{
    #position: relative; 
    #top: -50%; 
}

#navigation ul li
{
    float: left;
}

#navigation ul li a
{
    padding: 5px 10px;
    margin-left: 2px;
    background-color: Red;

    text-decoration: none;
    font-family: Verdana;
    color: White;
}

I want the menu to have a 2px margin around all of the link elements.
The problem I am facing is that while it renders itself fine in IE with all of the rights margins but both Chrome and Firefox (both are latest) are having the following issues:

The problem does not seem to be related to only this particular implementation but Ive seen it rise up from veertically centering the links with line heights and so on too.

I would like to find a way to have all of the margins to look the same or some way to avoid this problem all-together.

Answer 1

Basically, I got this thing sorted out. I set the same line-height and height attribute to all of the following: ul, li, nav holder. I did it because when it was not done, all of these were rendered differently from browser to browser.

In addition, I removed the positionings, vertical alignings, hav-holder div entirely and then some.