Question

OK, so I have this in <li> floating to the right… like so:

and here it is:

<div id="right_menu">
<ul>
<li class="search-li"><input placeholder="Search things here..." type="text" class="search-tr" /></li>
</ul>
</div>

Here’s the CSS:

#right_menu {
    float:right;
    background: #575757;
}
#right_menu ul li a {
    border-left:1px solid #fff;
    border-right:0px !important;
}

The search-li class and search-tr have no style. The search menu is wrapped around #first_menu and that CSS is:

#first_menu {
    background: #333 !important;
    width:100%;
    border-top:1px solid #fff;
}
#first_menu ul{
    margin: 0;
    padding: 0;
    background: #333;
    float: left;
    }

Anyway, when I add <form action="search.php" method="get"> ... </form> around the <input> box inside the <li>… I get this:

How do I fix this?

Thanks

edit: On second thought, not even sure that adding form and pressing enter would even work…

Answer 1

FORMs are block elements, therefore they add a line-break. Reset the form’s CSS so it doesn’t.

Use:

form {
   display:inline;
   margin:0;
   padding:0;
}

Using !important is a sign that do know how CSS specificity works. It’s good to read up on this.

Also, it’s good to start with a CSS reset, which would prevent this form layout problem completely.