Question

I’m trying to create a header menu.
Please see my code here: http://jsfiddle.net/kc2cc/ .

My intention was that, if user clicks on of the menu items (logo, places, events or groups) then the clicked element will move down 1px, and until click it comes back to original position.
In Chrome 15 everything works fine, but in Firefox and IE if I click on element all the elements move down.

What is the reason, and how can I fix it?
Thanks

Answer 1

I don’t really know why but it seems it’s the default value baseline for ul#navigation li which causes the problem. Change it for middle or anything else will solve it.

ul#navigation li {
    border-right: 1px solid #F5F5F5;
    display: inline-block;
    height: 35px;
    vertical-align: middle;
}