Home/ Questions/Q 7043253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:16:00+00:00

I’m trying to make a text field and a button appear like they are

  • 0

I’m trying to make a text field and a button appear like they are part of a joint element, so that they look like this (screenshot from Chrome Linux):

Example in Chrome

However in Firefox Linux the button is two pixels too tall:

Example in Firefox

Example CSS: http://dabblet.com/gist/1603701

I have set the font size of both elements to 16px in the hope that they will display the same, giving a line-height of 19px – but in Firefox the button has a height of 21px instead! Setting an explicit height can lead the vertical alignment to become incorrect in Firefox unless I shrink the font (not sure why that is).

Apparently you can’t set the line-height on inputs in Firefox (see article and bug report), so how else can I force the elements to be the right height?

Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a cross-browser solution:

    <!doctype html>
<html lang="en">
    <head>
       <style>
            html, body{
                padding: 50px;
            }
            .inputWrapper{
                display:inline-block;
                font-size:16px;
                padding:0px;
                border:1px solid #000000;
                border-radius:6px;
                background-color:#ffffff;
            }
            .email{
                margin:0px;
                margin-left:1px;
                padding:5px;
                border-width:0px;
                border-radius: 6px 0px 0px 6px;
            }
            .submit{
                margin: -1px;
                margin-left: -5px;
                padding: 6px;
                border-width:0px;
                border-radius: 0px 6px 6px 0px;
                color:#ffffff;
                background-color:#D94E35;
            }
        </style>
    </head>
    <body>
        <div class="inputWrapper">
            <input class="email" type="email" value="" placeholder="email address"/>
            <input class="submit" type="submit" value="Subscribe" />
        </div>
    </body>
</html>

    You can see it working here: http://dabblet.com/gist/1604595

    • 0