Form spacing is incorrect

Question

I am designing a website from scratch (using Grails, but that's irrelevant). I am having an issue with my menu bar. The form I have seems to have some sort of padding that I cannot remove. If you load up this HTML and CSS, you should be able to see the problem. On the left, there is the menu bar, and underneath it, there is a little gap. How can I fix this?

body{
    margin: 0px;
}

.body {
    padding:20px;
    margin-top:30px;
}

.menu {
    margin: 0;
    padding: 0;
    top: 0;
    width: 100%;
    position: fixed;
    background-color: #333;
}

.menu ul {
    list-style-type: none;
    overflow: hidden;
    display: inline;
   -webkit-margin-before: 0px;
   -webkit-margin-after: 0px;
}

/* Navigation */

.menu .nav li {
    float: left;
}

.menu .nav li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}

.active {
    background-color: #4CAF50;
}

.menu .nav a:hover:not(.active) {
    background-color: #111;
}

/* User */

.menu .login {
    float: right;
}

.menu .login form {
    padding-top: 10px;
    padding-right: 16px;
    display: inline;
}

.menu .login li {
    display: inline;
}

.menu .login form li input[type="submit"]{
    border: none;
    background-color: #4CAF50;
}

<html xmlns:g="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Neon Orb
    </title>
    <link rel="stylesheet" href="main.css" type="text/css">


    <meta name="layout" content="main"/>

</head>
<body onload="">
<div class="menu">
    <ul class="nav">
        <li>
            <a href="/" class="active">
                Home
            </a>
        </li>
        <li>
            <a href="/about" class="">
                About
            </a>
        </li>
    </ul>

        <ul class="login">
            <form action="/user/login" method="post" name="login" id="login" >
                <li>
                    <input type="text" name="username" placeholder="Username" value="" id="username" />
                </li>
                <li>
                    <input type="password" name="password" placeholder="Password" value="" id="password" />
                </li>
                <li>
                    <input type="submit" name="_action_Login" value="Login" />
                </li>
            </form>
        </ul>


</div>
<div class="body">

<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>

</div>
</body>
</html>

On Chrome, there is a workaround, -webkit-margin-after/before that is set to 16px, and it can be overridden. This doesn't work on Firefox though.

Possible duplicate of [-webkit-margin adds unwanted margin on texts](http://stackoverflow.com/questions/5721966/webkit-margin-adds-unwanted-margin-on-texts) — Stickers, Dec 18 '15 at 23:01

score 1 · Accepted Answer · answered Dec 18 '15 at 23:03

First, your HTML is not well formed: A form should not be between ul and li. Reorder it like this:

   <form action="/user/login" method="post" name="login" id="login" >
        <ul class="login">
            <li>
                <input type="text" name="username" placeholder="Username" value="" id="username" />
            </li>
            <li>
                <input type="password" name="password" placeholder="Password" value="" id="password" />
            </li>
            <li>
                <input type="submit" name="_action_Login" value="Login" />
            </li>
    </ul>
</form>

And then, add this descriptor to the CSS:

.menu form ul {
    margin: 0;
}

score 0 · Answer 2 · answered Dec 18 '15 at 22:58

0

I am not exactly sure why FireFox is not taking off the padding but you can add the reset to the top of your css and it should work:

*{
margin:0;
}

answered Dec 18 '15 at 22:58

Froy

708
1
6
15

FireFox is not webkit, so `-webkit-` CSS rules are ignored. – 11684 Dec 18 '15 at 23:00

score 0 · Answer 3 · answered Dec 18 '15 at 23:01

I don't have a Firefox at hand, but simply setting margin instead of -webkit-margin-after seems to do the trick in Safari.

.menu ul {
    list-style-type: none;
    overflow: hidden;
    display: inline;
    margin:0;
    /* -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;*/
}

Test for yourself:

https://jsfiddle.net/6fznv14v/

Form spacing is incorrect

3 Answers3