The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Strange 1px shift in navigation bar. Cause?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #38214

    Hi there,

    I’m currently working on a simple navigation bar using unordered list and inline-block display.
    This is how it currently looks: Image link

    However, I have one issue that I don’t understand. The li elements are shifted 1px to the bottom from where it’s supposed to be (see red marks). All vertical margin and padding for ul and li elements are already set to 0.

    This is the HTML code (minimal example):

    Test CSS

    And this is the corresponding CSS:

    body {
    text-align: left;
    width: 1000px;
    margin: 0 auto;

    #topbar {
    height: 70px;
    line-height: 70px;
    background-color: #262626;

    #topbar a {
    text-decoration: none;
    color: #ffffff;

    #topbar ul {
    float: right;
    margin-right: 40px;

    #topbar li {
    display: inline-block;
    padding: 0 20px 0 20px;
    vertical-align: middle;

    #topbar {
    width: 2px;
    height: 70px;
    padding: 0;
    margin: 0;
    background-image: url('images/border_line.jpg');

    I guess a little workaround can solve the 1px shift problem.
    However, I would like to know about the root cause of this problem. Any clues?



    I guess it has to do with the fact you make the LI’s “inline-block”, which gives them some block-type properties and some inline-properties — it makes them act a little funkier than just blocks.


    Setting the li vertical alignment to “top” seems to solve the problem, but I don’t really understand why.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.