CSS-based menu bar inside a table: li’s are 1px off; problems with the table border?

Edit: The target browser is IE10 or higher; no need for compatibility to other browsers.

Inside the header of a page I have 3 elements (this is also the order):

  • An application logo
  • The application title
  • A CSS-based menu bar

Here is a JSFiddle for those who can’t wait 😉

The header itself is 60px high, the elements should be vertically centered and be “floating” left. I couldn’t get it to work using float: left on them as I am not very good at pure CSS layouts, so I pragmatically plugged in a table to get this to work.

It works except for an annoying 1px big problem: the li items (that is, the clickable menu bar items) have a 1px offset from the top of the page, and thus are not aligned perfectly inside the header but extend into the #content. So my questions are:

  • How can I fix this offset and what is its cause? I thought it could be a border issue with the table, but it doesn’t really look that way. Is it perhaps because of the line-height?
  • Not really important but interesting for me: How could I achieve my desired layout without using a table, as I often read that it is really bad style?

Here is the HTML I used:

<body>
    <header>
        <table>
            <tr>
                <td style="vertical-align: middle">
                    <img class="logo" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.png" />
                </td>
                <td>
                    <label class="title">Title</label>
                </td>
                <td>
                    <div class="menu">
                        <ul>
                            <li>Home</li>
                            <li>Test
                                <ul>
                                    <li>One</li>
                                    <li>Two</li>
                                    <li>Three</li>
                                </ul>
                            </li>
                            <li>About</li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </header>
    <div id="content"></div>
    <footer>Footer</footer>
</body>

And this is the CSS:

/* ------ General layout ------ */

 body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Verdana;
    font-size: 12px;
}

header {
    width: 100%;
    height: 60px;
    background-color: #eeeeee;
    position: fixed;
    top: 0;
}

#content {
    width: 90%;
    margin: 0 auto;
    padding-top: 70px;
    /* header height + 10 */
    padding-bottom: 50px;
    /* footer height + 10 */
}

footer {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #eeeeee;
    position: fixed;
    bottom: 0;
    text-align: center;
}

.logo {
    resize: both;
    height: 30px;
    margin-left: 20px;
    margin-right: 20px;
}

.title {
    font-weight: bold;
    color: green;
    margin-right: 20px;
}

/* ------ CSS-based menu bar attempt ------ */

 table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

table td:last-child {
    width: 100%;
}

.menu ul {
    line-height: 60px;
    text-align: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu ul li {
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 0 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu ul li:hover {
    background: #555;
    color: #fff;
}

.menu ul li ul {
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 160%;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.menu ul li ul li {
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}

.menu ul li ul li:hover {
    background: #666;
}

.menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}


Source: css3

Leave a Reply