Панель вкладок в заголовке выровнена вправо. Поддержка всех проблем с браузерами

Question

Я хотел бы получить что-то вроде здесь

Я закодировал это так: HTML:

            <header>
            <div id="logo">

                <form id="login" action="/login" method="post">
                    <div>
                        <label>
                            Login: <input type="text" name="username" value="">
                        </label>

                        <label>
                            Password: <input type="password" name="password" value="">
                        </label>
                        <input type="submit" name="login" value="Log In">
                    </div>
                </form>

                <nav>

                    <ul>
                        <li class="active">
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="/page_1">Some link</a>
                        </li>
                        <li>

                            <a href="/page_2">Some link</a>
                        </li>
                    </ul>
                </nav>  
            </div>          
            <div id="under_menu">
                <nav>

                    Location:
                    <ul>

                        <li>

                            <a href="/">Home</a>

                        </li>

                    </ul>
                </nav>
                <form id="search" action="/search" method="post" onsubmit="this.form.submit();">
                    <div>

                        <input type="text" name="search_query" value="Search">
                    </div>
                </form>
            </div>
        </header>

и CSS:

#logo {
    background:#fff url('./gfx/logo.png') no-repeat;
    overflow:hidden;
}

#login {
    color:#999;
    float:right;
    font-size:0.9em;
    padding-top:5px;
}

#logo nav {
    clear:both;
    float:right;
    padding-top:30px;
}

#search {
    float:right;
    padding:4px 0;
}

#logo nav ul {
    list-style:none;
    padding:8px 0;
}

#logo nav li {
    color:#444;
    cursor:pointer;
    display:inline;
    font-size:1.2em;
}

#logo nav li a {
    color:#777;
    padding:9px 12px;
}

#logo nav .active a {
    background:#1181ce;
    color:#fff;
}

#logo nav li:hover a {
    color:#1181ce;
}

#logo nav .active a:hover {
    color:#fff;
}

#under_menu {
    background:#f0f0f0;
    border-top:2px solid #1181ce;
    height:100%;
    overflow:hidden;
    padding:0 9px;
}

#under_menu nav {
    float:left;
    padding:8px 0;
}

#under_menu nav ul { display: inline; list-style: none; }
#under_menu nav li { display: inline; }

и сэтот код выглядит в браузерах как:

Firefox:

Google Chrome:

Я пытался исправить это в течение нескольких дней, но я неПонятия не имею.Что вы думаете о проблеме?

Answer 1

хмм, в Firefox у меня есть небольшое пространство, но только когда мое окно имеет определенные размеры ... в любом случае, если я изменяю отступ на #logo nav ul { padding: 8px 0; } вместо #logo nav ul { padding: 9px 0; }, кажется, что это исправленоFirefox и Chorme.http://jsfiddle.net/cr9Rg/