Question

My code looks similar to this one: http://jsfiddle.net/wJ6V5/

CSS

.u_menu {
    background:#000;
    height:40px;
    width:100%;
    background-image: -moz-linear-gradient(top, #97c840, #8ab63a);
    background-image: -webkit-linear-gradient(top, #97c840, #8ab63a);
    background-image: -o-linear-gradient(top, #97c840, #8ab63a);
}
ul.u_nav {
    float:right;
    margin-right:250px;
    margin-top:7px;
}
ul.u_nav li {
    font-size:14px;
    background:#fff;
    float:left;
    margin-right:15px;
    padding:3px 10px;
    border-bottom:solid 1px #a6cd62;
    box-shadow:inset 0 1px 1px 0 #666;
    background-image: -moz-linear-gradient(top, #80ae2e, #8ebf38);
    background-image: -webkit-linear-gradient(top, #80ae2e, #8ebf38);
    background-image: -o-linear-gradient(top, #80ae2e, #8ebf38);
}  

HTML

<div class="u_menu">
    <ul class="u_nav">
        <li>Test</li>
        <li>Teest</li>
    </ul>
</div>

In Firefox page looks good (like I want), but in Chrome and Opera li elements are not in the middle of main div. They are 1px closer to top border.

I think it’s because Chrome and Opera add border height to li height, so in these browsers li elements are 1px higher then in FF, but I’m not sure if this is a reason.

Is there any way to fix it? I would like to have effect in Chrome and Opera exactly the same like in Firefox. Or is there other way to set li elements in middle of u_menu div?

Answer 1

The problem seems to be with font size. When I reduce it to say 11px, both Firefox and Chrome show the same height. I really don’t know why that is, but for example font-size: 1em is about the size you have right now and also gives the same result in both browsers for me.