Strange 1px shift in navigation bar. Cause?

[ang89]

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):

Log in




Sign up




Event




Help

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 li.menu-division {

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?

Thanks.

[Senff]

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.

[ang89]

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

[Author]

Posts