Search code examples
cssfirefoxalignment

Form button not aligned in Firefox

I'm making a search bar with a button next to it.

The button is perfectly aligned with the search bar on Chrome and Opera, but on Firefox the button goes up by a couple of pixels.

I've tried to play with the padding and the margin but it don't seems to work.

Here's my code and what it looks like on Chrome and Firefox :

HTML :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/fontawesome.min.css" rel="stylesheet">
<form id="gameSearch" action="#">
    <input type="text" name="game_search" maxlength="16" placeholder="Search...">
    <button class="icon"><i class="fa fa-search"></i></button>
</form>

CSS :

button.icon {
    margin-left: -5px;
    background-color: #9b59b6;
    border: 0 none;
    color: white;
    font-size: 25px;
    width: 75px;
    height: 50px;
    cursor: pointer;
}

button.icon:hover {
    background-color: #8e44ad;
}

input[type="text"] {
    border: 0 none;
    background-color: #ffffff;
    height: 50px;
    width: 350px;
    font: 25px sans-serif;
    padding: 0 0 0 5px;
}

form#gameSearch {
    padding: 50px 0;
    margin: 0 auto;
    width: 430px;
}

What it looks like :

In Chrome

In Chrome

In FireFox

In Firefox

Solution

  • Add vertical-align: top; to the input field:

    body {
background: #ddd;
}
   
button.icon {
box-sizing: border-box;
    margin-left: -5px;
    background-color: #9b59b6;
    border: 0 none;
    color: white;
    font-size: 25px;
    width: 75px;
    height: 50px;
    cursor: pointer;
}

button.icon:hover {
    background-color: #8e44ad;
}

input[type="text"] {
box-sizing: border-box;
    border: 0 none;
    background-color: #ffffff;
    height: 50px;
    width: 350px;
    font: 25px sans-serif;
    padding: 0 0 0 5px;
    vertical-align: top;
}

form#gameSearch {
    padding: 50px 0;
    margin: 0 auto;
    width: 430px;
}
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/fontawesome.min.css" rel="stylesheet">
<form id="gameSearch" action="#">
    <input type="text" name="game_search" maxlength="16" placeholder="Search...">
    <button class="icon"><i class="fa fa-search"></i></button>
</form>