CODEWITHSUNDEEP
htmlcsspositioning
Tamás Pap
Tamás Pap

Reputation: 18313

Menu item positioning issue

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

Upvotes: 0

Views: 64

Answers (2)

korywka
korywka

Reputation: 7653

set vertical-align: top for <li> http://jsfiddle.net/kc2cc/13/

Upvotes: 1

MatTheCat
MatTheCat

Reputation: 18771

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;
}

Upvotes: 1

Related Questions