Reputation: 2217
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):
However in Firefox Linux the button is two pixels too tall:
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
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
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