CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 2217

Equal height text boxes and buttons

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?

Upvotes: 3

Views: 877

Answers (2)

vdbuilder
vdbuilder

Reputation: 12994

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

Upvotes: 4

Dan G
Dan G

Reputation: 24

you have two different paddings on your form boxes, very easy fix.

Change your CSS from this >

input[type="submit"] {
margin: 0;
padding: 6px 15px; /* Padding set 1px to high, so your getting 2px total extra space */
border: none;
border-radius: 0 6px 6px 0;
font-size: 16px;
line-height: normal;
color: white;
background: #D94E35;
}

To This >

input[type="submit"] {
margin: 0;
padding: 5px 15px; /* Now you should have even paddings */
border: none;
border-radius: 0 6px 6px 0;
font-size: 16px;
line-height: normal;
color: white;
background: #D94E35;
}

Upvotes: 0

Related Questions