[Solved-ish…]Webkit inputs – No es bueno!

[werm]

I’ve got a little email sign up form. So far so good. The submit button is inline with the input. Everything worked out great, and lined up perfectly. Then I checked it in Webkit (Safari & Chrome), and the submit button is pushed down 10px from the text input. I’ve comment out every line of the css, but I can’t seem to find what’s causing it. Hopefully a fresh set of eyes will help. Thanks in advance!

Screenshot – http://cl.ly/6335db5e4ce4fed4dde1
Site – http://thepusherscbus.com

And the code…

input[type="text"]  {

border: 1px solid #161f2b;

padding: 5px 0;

text-indent: 5px;

font-size: 15px;

line-height: 1.2em;

width: 340px;

background: #fff;

background: -webkit-gradient(linear, left top, left bottom, from(#bcc8d2), to(#9caab6));

background: -moz-linear-gradient(90deg, #9caab6, #bcc8d2);

-webkit-appearance: none;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

outline: none;

-webkit-background-clip: padding-box;

margin-top: 20px;

}



input[type="text"]:focus  {

background: -webkit-gradient(linear, left top, left bottom, from(#9caab6), to(#bcc8d2));

background: -moz-linear-gradient(90deg, #bcc8d2, #9caab6);

}



input::-webkit-input-placeholder  {

color: #666;

}



input[type="submit"]  {

border: none;

background: url(../images/send.png) no-repeat top center;

width: 60px;

height: 31px;

margin: 0;

padding: 0;

margin-left: -6px;

cursor: pointer;

}

PS – What’s the shortcode for code formatting on this here forum?

[werm]

Never mind. Went a different route.

[jamygolden]

I know you’ve gone a different route, but I’ll comment anyway.

You could solve the problem by adding/changing these css properties:

input[type="submit"]{float: right; margin: 5px 10px 0 0;}

input[type="text"]{float: left; width: 315px;}

The shortcode for code formatting is <pre><code>Code here</code></pre>

[werm]

Thanks, jamy. Turns out the different route didn’t solve my problem, and I was still getting the 10px push in Webkit browsers. For whatever reason, Webkit doesn’t like it when you have a line-height on your text input but not on your button. I just slapped a line-height on the button and problem solved! Thanks for your help though! That’s what makes this forum better than the others. Even after someone says “never mind”, people still step in to lend a hand. Thank you!

[Author]

Posts